Question

我有四个带有四个内部div的容器，左边是自动高度。

<div class="box">
    <div class="head">
        Heading text
    </div>
    <div class="image">
        Image
    </div>
    <div class="text">
        Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
    </div>
    <div class="link"><a href="#">Link text</a></div>

.box{
    width: 150px;
    float: left;
}

完成jsFiddle： http://jsfiddle.net/H8w32/

为了使内部divs高度与四个容器中的所有容器相同，我更改了浮动布局，并使用了display：table。

<div class="table">
    <div class="row head">
        <div class="cell">Heading text</div>
        <div class="cell">Here is a lot longer heading text to examplify</div>
        <div class="cell">Heading text</div>
        <div class="cell">Heading text</div>
    </div>
    <div class="row image">
        <div class="cell">Image</div>
        <div class="cell">Image</div>
        <div class="cell">Image</div>
        <div class="cell">Image</div>
    </div>
    <div class="row text">
        <div class="cell">Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</div>
        <div class="cell">Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</div>
        <div class="cell">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Integer posuere erat a ante. Dapibus posuere velit aliquet.</div>
        <div class="cell">Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</div>
    </div>
    <div class="row link">
        <div class="cell"><a href="#">Link text</a></div>
        <div class="cell"><a href="#">Link text</a></div>
        <div class="cell"><a href="#">Link text</a></div>
        <div class="cell"><a href="#">Link text</a></div>
    </div>
</div>

-

.table{
display: table;
}

.row{
    display: table-row;
}

.cell{
    display: table-cell;
    width: 150px;
}

http://jsfiddle.net/Wh7Pm/1/

这看起来就像我想要的那样。但是现在我失去了使用float的特权，特别是能够添加更多容器，并且它们会自动被推入下一行＆＃34; row＆＃34;，或者如果视口也是如此，它们会被推到新行很小，适合他们。容器被添加到同一行＆＃34; row＆＃34;如果我在显示器上添加更多容器：表格布局。

这可以解决吗？我想要显示的行为：table（标题div和文本div的高度相等）和float：left。

Answer 1

目前无法使用javascript设置高度。您可能需要查看CSS灵活框的规范，这是解决此问题的真正的CSS解决方案。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

Flexbox的采用仍处于早期阶段，但如果您正在构建一个针对大多数现代浏览器的尖端应用程序，那么您可以使用它。

如何实现内部div和float的相等高度：同时离开？

1 个答案: