Question

如果有人能在此提供任何见解，我们将非常感激。我想创建输出，在不同的日期显示健身课程中的预订。这个想法是有三个跨越，但需要很多行来覆盖所有日期。要做到这一点，我想使用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

但是不是让三个div水平排列，而是第二行有两个div，我得到了这个：

Linked Image

一些笔记。首先，请注意HTML中的层次结构（ListSetContainer div包含ListSet div）不会反映在输出中。其次，ListSetContainer div只有一个像素高 - 没有显示背景！（我使用红色背景只是为了确保我不会错过它）。整个封闭的div只是被压扁，内部的div自己浮出来。手动设置高度不起作用，因为带有列表的内部div是可变高度（并且看起来很奇怪，要引导）。如果我删除浮动：左;从内部div，它们扩展到屏幕的整个宽度，因此我不能连续三个。所以...我不知所措。

再次感谢您提供的任何帮助！

Answer 1

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

我也希望你的ListSetContainer使用clear: both。这应该使它开始ListSets的新“行”。

Answer 2

clear:both块使用.ListSetContainer。

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

<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>

Answer 3

问题在于ListSet类需要“display：block;”添加或“浮动：左;”删除并添加块然后将“display：block; width：100％”添加到ListSetContainer类。

Answer 4

这是因为ListSetContainer没有设定的宽度。我希望它们能够在宽屏显示器上安装一排。

你可以尝试：

.ListSetContainer {
    width: 300px;
}

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

适当的风格。

Answer 5

您正在使用固定的列集显示表格数据 - 每月一列。听起来像是应该用什么表。现在你有机会使用桌子而不会感到内疚！

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

如果做不到这一点，我认为每行之间需要clear: both。

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

5 个答案: