Question

简单描述一下情况：

我有什么：

----------------------------------
XXXXXXXX     XXXXXXXX     XXXXXXXX
XXXXXXXX     XXXXXXXX     XXXXXXXX
XXXXXXXX     XXXXXXXX    
XXXXXXXX
XXXXXXXX
----------------------------------

我想拥有什么：

----------------------------------
XXXXXXXX     XXXXXXXX     XXXXXXXX
XXXXXXXX     XXXXXXXX     XXXXXXXX
XXXXXXXX     XXXXXXXX     XXXXXXXX
XXXXXXXX     XXXXXXXX     XXXXXXXX
XXXXXXXX     XXXXXXXX     XXXXXXXX
----------------------------------

我不想使用display: table-cell，因为它不是跨浏览器;

我也不想使用<table>（如果可能的话）。

我想学习：强制浮动块适合容器高度的技巧？！

PS：我试试这种方式（这个LESS代码不起作用，你可能不太注意它）

#container {
    width: 100%;
    overflow: hidden;

    div {
        float:left;
        width: 33.3%; /*only three of them. It's strange, but this is what works: 31%*/
        min-height: 100%; /*unfortunutely not works */
        height: 100%;
        background: red;
    }
}

<div id="container">
   <div><div>
   <div><div>
   <div class="last"><div>
</div>

Answer 1

对于纯粹的无黑客解决方案，您可以将列包装在第二个容器中，如下所述：

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Answer 2

在此处查看此演示：http://jsfiddle.net/FDm9F/3/embedded/result/

如果缩放，您可以看到桌子的高度始终为100％

<强> HTML

<table cellpadding="0" cellspacing="0">
    <tr>
        <td>a</td>
        <td>a</td>
        <td>a</td>        
    </tr>
</table>

<强> CSS

html, body{
    width: 100%;
    height: 100%;
}
table{
    width: 300px;
    height: 100%;
    min-height:100%;
}
table tr td{
    width:33.3%;
    height: 100%;
    background: #F00;
    border-left: 1px solid #000;
    text-align:center
}

Answer 3

容器有高度吗？如果没有，这可能是100％不工作的原因。

CSS：如何强制浮动块具有相等（100％？）的高度

3 个答案: