Question

我先问一下基本问题，然后详细说明为什么我要问。我在<div>中有一堆类似的浮动块元素，我在overflow:auto上设置<div>，以便它的高度扩展到正确包含其中的所有元素。

有没有办法，仅使用CSS和HTML，只将第一个浮动元素设置为div的整个高度？

为了清楚起见：我想将包含的元素增长到容器的高度，而不是相反。

我尝试添加

 height: 100%

到第一个浮动元素的CSS，但这没有效果。

关于令人难以忍受的细节。如果想出一个更好的整体方法，这将消除这个特殊问题，我全都听见了。

我在<ul>内模拟一个带有一堆浮动<div>元素的表。每个列表都是“表”中的一列，第一个列表是行标签列。因此，要呈现以下内容：

         col A     col B
row 1     foo       baz

row 2     bar       bat

我使用这个标记：

<div>
    <ul class='row-label'>
        <li>&nbsp;</li> *
        <li>row 1</li>
        <li>row 2</li>
    </ul>
    <ul class='data-col'>
        <li class='data-header'>col A</li>
        <li>foo</li>
        <li>bar</li>
    </ul>
    <ul class='data-col'>
        <li class='data-header'>col B</li>
        <li>baz</li>
        <li>bat</li>
    </ul>
</div>

*“行标签”列表的第一项应该是一个不间断的空格，但我无法显示 

细心的读者可能会疑惑“嗯？为什么不使用真正的桌子？”两个答案：

对于我的数据，我的假表方法在语义上更合适。数据在每个“列”中比在每个“行”中更紧密相关，但HTML表格则相反。因此，我需要在后端使用更复杂的PHP来将数据转换为HTML表格，结果不会那么有意义。这里的“表格”实际上更像是一种视觉/表现效果。
我希望能够在JavaScript中操作各个列（显示它们并隐藏它们以响应用户操作，具有转换效果）。从我在研究它时可以看出，在标准HTML表中没有直接的方法 - 正是因为行而不是列是HTML表的基本单元。如果我错了，请给我一个反例。

简化的CSS看起来像这样：

div {
    overflow: auto;
}

div ul {
    float: left;
    list-style-type: none;
    padding: 0;
    margin: 0 0.5em;
}

当行的列数超过浏览器窗口宽度时，会出现问题。列包裹到下一行，我得到了这个草率的结果：

         col A     col B     col C
row 1     foo       baz       bar

  col D     col E
   zab       oof

最终我有一个更好的解决方案，但最简单的立即解决方法是给行标签列足够的高度来推动这些包裹的列成行。如果我做这样的事情：

ul.row-label {
     height: [lots of ems]
}

然后我得到了这个结果：

         col A     col B     col C
row 1     foo       baz       bar

         col D     col E
          zab       oof

但是因为在第一个下面可以有更多的这些模拟表，并且因为每个“表”中可以有任意数量的行，所以我不能依赖于绝对高度。

Answer 1

确保在UL内部的LI元素上设置display：block。你还应该给你的UL显示：块，溢出：隐藏和高度：100％。默认情况下，列表项是内联块，它将忽略您的高度设置。

以下是概念证明：

<html>
<head>
<style type="text/css">
* { border: solid 1px black; }

div { overflow: auto; }

div ul 
{ 
    display: block; 
    height: 100%; 
    overflow: hidden; 
    float: left;
}
div ul li { display: block; }
</style>
</head>
<body>
<div>
    <ul class='row-label'>
        <li>&nbsp;</li>
        <li>row 1</li>
        <li>row 2</li>
    </ul>
    <ul class='data-col'>
        <li class='data-header'>col A</li>
        <li>foo</li>
        <li>bar</li>
    </ul>
    <ul class='data-col'>
        <li class='data-header'>col B</li>
        <li>baz</li>
        <li>bat</li>
    </ul>
</div>
</body>
</html>

Rendered example http://img526.imageshack.us/img526/9444/tablewithlists.png

Answer 2

首先，正如您所指出的，您真的应该使用表格来表格数据。您可以像在其他任何地方一样对表格中的元素执行完全相同的操作。

我不知道你为什么要做这么疯狂的事情，但你最好的办法就是把.data-col元素放在一个单独的div中，添加一个左边距，然后将它们放在左边：

编辑：为我的理智添加了代码

ul, li {
  display: block;
  margin: 0px;
  padding: 0px;
}
ul {
  float: left;
  margin: 0px 5px;
}
li {
  height: 20px;
}
.data-cols {
  left: 0px;
  margin-left: 50px;
  overflow: hidden;
}

<div>
    <ul class='row-label'>
        <li> </li>
        <li>row 1</li>
        <li>row 2</li>
    </ul>
    <div class="data-cols">
        <ul class='data-col'>
            <li class='data-header'>col A</li>
            <li>foo</li>
            <li>bar</li>
        </ul>
        <ul class='data-col'>
            <li class='data-header'>col B</li>
            <li>baz</li>
            <li>bat</li>
        </ul>
    </div>
</div>

Answer 3

这可能有助于提出想法吗？我自己刚刚找到了这个css框架：

http://www.blueprintcss.org/

如何将包含的浮动元素生长到其容器的整个高度？

3 个答案: