代码之家 › 专栏 › 技术社区 › hugoware

不使用表格的均匀列高度

stylesheet html-table css html

hugoware · 技术社区 · 17 年前

<table>
    <tr>
        <td style="background:#F00;">
            This is a column
        </td>
        <td style="background:#FF0;">
            This is a column<br />
            That isn't the same<br />
            height at the other<br />
            yet the background<br />
            still works
        </td>
    </tr>
</table>

使用div

<div style="float:left;background:#F00" >
    This is a column
</div>
<div style="float:left;background:#FF0" >
    This is a column<br />
    That isn't the same<br />
    height at the other<br />
    yet the background<br />
    still works
</div>
<div style="clear:both;" ></div>

将其中一个嵌套在另一个中是不可行的,因为它不能保证两边都是正确的高度。

不幸的是,预览显示了工作的HTML,但实际的帖子将其删除。您应该能够将其粘贴到HTML文件中,并了解我的意思。

7 回复 | 直到 9 年前

asleep 17 年前

http://www.xs4all.nl/~peterned/examples/csslayout1.html

这就是你想要的东西,给它们一个100%的高度(使用这个css技巧),它们就会延伸到包含div的高度!

编辑:忘了提到,把它们放在一个容器div中!

编辑:

<html>
<head>
    <style>
        html, body
        {
            margin: 0;
            padding: 0;
            height: 100%; /* needed for container min-height */
        }
        #container
        {
            background-color: #333333;
            width: 500px;
            height: auto !important; /* real browsers */
            height: 100%; /* IE6: treaded as min-height*/
            min-height: 100%; /* real browsers */
        }
        #colOne, #colTwo
        {
            width: 250px;
            float: left;
            height: auto !important; /* real browsers */
            height: 100%; /* IE6: treaded as min-height*/
            min-height: 100%; /* real browsers */
        }
        #colOne
        {
            background-color: #cccccc;
        }
        #colTwo
        {
            background-color: #f4f5f3;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="colOne">
            this is something</div>
        <div id="colTwo">
            this is also something</div>
        <div style="clear: both;">
        </div>
    </div>
</body>
</html>

AmbroseChapel 17 年前

伪造的

Andrew Moore 16 年前

使用 Faux Column CSS技术 解决这个问题。

<div class="contentSidebarPair">
    <div class="sidebar"></div>
    <div class="content"></div>
</div>

可以使用以下样式:

/* sidebar.gif is simply a 200x1px image with the bgcolor of your sidebar.
   #FFF is the bgcolor of your content */
div.contentSidebarPair {
    background: #FFF url('sidebar.gif') repeat-y top left;
    width: 800px;
    margin: 0 auto; /* center */
    zoom: 1; /* For IE */
}

/* IE6 will not parse this but it doesn't need to */
div.contentSidebarPair:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

div.sidebar {
    float: left;
    width: 200px;
}

div.content {
    float: left;
    width: 600px;
}

那里简单有效。绝对不涉及JavaScript。如果您想创建更复杂的布局(液体布局),您可以使用背景位置调整此技术。A. tutorial is available here .

Kornel 17 年前

display:inline-block

<div><span>
    col1
</span></div>
<div><span>
    col2
</span></div>

div {display:inline;}
span {display:inline-block;}

zeroDivisible 16 年前

是的,这是可能的-纯CSS,没有黑客- equal height columns .

robertc 14 年前

<div>
    This is a column
</div>
<div>
    This is a column<br />
    That isn't the same<br />
    height at the other<br />
    yet the background<br />
    still works
</div>

div { display: table-cell; }

如果布局中需要多行,则必须在其中添加一些包装器元素,否则 this works straight off .

-2

Darko 17 年前

有一种简单的方法可以通过巧妙的HTML和CSS实现这一点。

首先是HTML:

<div id="container">
    <div id="col1">
        this is column 1
    </div>
    <div id="col2">
        this is column 2<br />
        it is obviously longer than the first column <br />
        YEP!
    </div>
</div>

现在CSS:

#container { background:#f0f; overflow:hidden; width:400px; }
#col1, #col2 { float:left; width:50%; }
#col2 { background:#ff0; }

容器规则中隐藏的溢出确保容器扩展到所包含的浮动div的大小(并消除每个人都非常喜欢的非自动清除div)。

容器的背景应用于第一列。col2 div的背景仅适用于第二个div。这给了我们一种错觉,即两个div的高度始终相同。

3行CSS中的简单语义解决方案。享受

编辑:请评论投票否决的原因,否则我不得不猜测为什么我的答案是错误的。在本例中,我忘记了将width属性添加到容器中,以便它能很好地与IE6/7配合使用。请检查上面修改的CSS。