Html 为什么这些Div标签没有正确嵌套？

如果有人能在这里提供任何见解，我们将不胜感激。我想创建一个输出，显示健身班在不同日期的预订情况。这个想法是要有三条横线，不管需要多少行来覆盖所有的日期。要做到这一点，我想使用CSS，而不是求助于表格

好的，我有以下CSS定义：

.ListSetContainer 
{ 
  background-color:Red;
  border:1px solid #999999;
  text-align:center;
}

.ListSet
{
  margin: 2px 2px 2px 16px;
  float: left;
  clear:none;
}

.ListSet ul 
{
  background-color: #EEEEEE;
  border: 1px solid #999;
  margin: 2px 2px 16px 2px;
  padding: 6px 6px 0px 6px;
}

以及以下HTML：

  <div style="clear:both;">
    <h4>Class Dates, Counts and Participants</h4>
    <div class='ListSetContainer'>
      <div class='ListSet'>
        <ul>...{Class information here...}
        </ul>
      </div>
      <div class='ListSet'>
        <ul>...{Class information here...}
        </ul>
      </div>
      <div class='ListSet'>
        <ul>...{Class information here...}
        </ul>
      </div>
    </div>  -- End of First ListSetContainer

    <div class='ListSetContainer'>
      <div class='ListSet'>
        <ul>...{Class information here...}
        </ul>
      </div>
      <div class='ListSet'>
        <ul>...{Class information here...}
        </ul>
      </div>
    </div>  -- End of Second ListSetContainer
  </div>  -- End of surrounding Div

上课日期、人数和参与者
…{此处的类信息…}

…{此处的类信息…}

…{此处的类信息…}

--第一个ListSetContainer的结尾
…{此处的类信息…}

…{此处的类信息…}

--第二个ListSetContainer的结尾
--周围分区结束

但是，我得到的不是三个div水平排列，然后是第二排两个div，而是：

一些注释。首先，请注意HTML中的层次结构（ListSetContainer div包含ListSet div）没有反映在输出中。其次，ListSetContainer div只有一个像素高-没有显示背景！（我使用红色背景只是为了确保我不会错过它）。整个包围的div被压扁了，内部div自己漂浮出来。手动设置高度不起作用，因为列表的内部div是可变高度的（启动时看起来很奇怪）。如果我移除浮动：左；从内部div开始，它们扩展到屏幕的全宽，因此我无法连续获得三个。所以…我不知所措

---

再次感谢您提供的帮助

您的ListSetContainer需要包含一些非浮动内容，以便具有高度/宽度。浮动元素会使其脱离正常布局层次结构，因此仅包含列表集的容器不包含任何正常呈现的内容。在容器中添加一个不间断的空间，然后您应该能够设置它的宽度/高度，因为其中会有要渲染的内容

---

我还希望您的ListSetContainer使用

清除：两者都使用
。这将使它开始一个新的列表集“行”。
对
.ListSetContainer
块使用
clear:both

但您仍然可以使用一个列表来改进这一点：

<style type="text/css">
    .ListSetContainer {
        list-style: none;
        padding: 0;
    }
    .ListSetContainer li {
        width: 33.333%;
        float: left;
    }
    .ListSetContainer li li {
        width: auto;
        float: none;
    }
</style>
<ul class="ListSetContainer">
    <li><ul><li>...{Class information here...}</li></ul></li>
    <li><ul><li>...{Class information here...}</li></ul></li>
    <li><ul><li>...{Class information here...}</li></ul></li>
    <li><ul><li>...{Class information here...}</li></ul></li>
    <li><ul><li>...{Class information here...}</li></ul></li>
</ul>


.ListSetContainer{
列表样式：无；
填充：0；
}
李先生{
宽度：33.333%；
浮动：左；
}
李莉先生{
宽度：自动；
浮动：无；
}

..{这里的课程信息…}
..{这里的课程信息…}
..{这里的课程信息…}
..{这里的课程信息…}
..{这里的课程信息…}

问题在于，ListSet类需要“display:block；”添加或“float:left；”删除，如果添加块，则向ListSetContainer类添加“display:block；width:100%”。
这是因为
ListSetContainer
没有设置宽度。我希望它们都能放在宽屏显示器的一排上

你可以试试：

.ListSetContainer {
    width: 300px;
}

.ListSet {
    clear: none;
    float: left;
    width: 100px;
}

以及适当的样式。
您使用一组固定的列来呈现表格数据——每月一列。听起来好像桌子是用来做什么的。现在是你使用桌子的机会了，你不用为此感到内疚

现在，如果不打算使用表，则应该固定每个元素的大小，而不是每行的元素数。让列数由浏览器窗口的大小决定

如果做不到这一点，我想你需要一个
清除：两行之间都
。
一个宽的图像确实会影响问题的布局。你应该只链接到图像。感谢Garry交换了图像。请接受我的道歉，因为我有点匆忙：在去工作之前试着把这个问题提出来！这是“原则上”的事情之一。我是从代码生成的，虽然我知道我可以在一个表中完成，但我还是很难理解为什么CSS/Div方法不起作用。不管怎样，+1感谢你的帮助！嘿——当你想起来的时候，如果你要成为W3C花生画廊认可的（tm）[grin]，他们会告诉你在这种情况下使用一张桌子；帮助（事情布置正确），但封闭的ListSetContainer仍然不是正确的高度（正如tvanfossan所预测的）。但是，设置宽度：100%处理所有事情。+1-感谢您的洞察力。老兄，你一直无处不在！根据Richard Grundy的建议，我最终使用了100%的宽度，这就保证了每行有三个列表集。奇怪的是，它还考虑了对非浮动内容的需求。我不知道为什么高度刚好出现了，但它确实出现了。CSS有时看起来像是废话……一旦你停止浮动内部内容，它就会回到正常的渲染流程中。由于外部div现在具有正常流中的内容，因此它将获得高度和宽度。很高兴你能解决问题。+1-感谢你提供的显示：块方法。我将花一些时间来处理这个问题。结果表明，关键是将ListSetContainer设置为使用100%的宽度。无论出于何种原因，使用display:block；如果浮动：左，则根本没有帮助；仍然使用。如果浮动：左；没有使用，我不需要显示：块；但是，如果没有宽度：100%的东西是垂直堆放的。+1-谢谢你的替代方法。你的CSS肯定比我的更干净，所以我会尝试一下。另外，你可以根据需要调整它的元素数量：只需改变宽度。但是要考虑到舍入专业