Question

我有一个非常基本的布局，利用多个容器和浮动div，我也使用box-sizing：border-box;消除凌乱的边界和填充百分比。我决定使用display：table技术来达到相同的div高度，但似乎无法让它工作。 display：table应用于内部容器，display：table-row在cell容器上，display：table-cell在内容div上我想要相等的高度。这是对的吗？

<!--HTML-->

<body>
<div class="container">
    <div class="inner-container">
        <div class="box">
            <div class="content-1">Nulla facilisi. Duis tristique enim odio, nec        interdum libero egestas ac. Etiam semper, felis ut tempus venenatis, metus augue tempor   lectus, sed vulputate massa ante ac metus. Suspendisse congue quam a odio sagittis  interdum. Sed at metus quis dolor gravida placerat. Phasellus non lectus neque. Nam a urna  feugiat, congue est eget, semper nibh. Aliquam venenatis a felis at volutpat. Fusce  pulvinar pretium nulla, ut cursus lorem placerat sit amet. Vestibulum bibendum rutrum   mollis.</div>
            <div class="content-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu augue ut orci pellentesque adipiscing sit amet ac mauris. Suspendisse porttitor et nisi at malesuada. Proin rutrum erat lacus, nec sagittis magna euismod at. In tincidunt risus felis, ut aliquam massa mattis id. Phasellus pharetra arcu risus, id viverra risus mattis in. Etiam a sem eget nisl feugiat sollicitudin. Morbi eu sollicitudin tortor. Curabitur euismod ultrices odio, id consequat mi lacinia vel. Suspendisse porta urna orci, quis feugiat dui vestibulum id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis semper, libero non vehicula congue, orci enim facilisis nunc, non gravida tellus dui eu nunc. Nullam malesuada malesuada turpis, nec ullamcorper lacus molestie non. Curabitur pretium sit amet ante et adipiscing. Vestibulum et turpis mollis, commodo mi at, laoreet ante.</div>
        </div>
    </div>
</div>

<!--CSS-->

.container{background:#dedede; float:left; height:1000px;}

.inner-container{background:#cecece; float:left; height:1000px; padding:4%; display:table;}

.box{background:#bebebe; float:left; display:table-row;}

.content-1{background:#aeaeae; float:left; width:48.5%; padding:4% -moz-box-sizing: border-box; box-sizing: border-box; display:table-cell;}

.content-2{background:#aeaeae; float:left; width:48.5%; margin-left:3%; padding:4% -moz-box-sizing: border-box; box-sizing: border-box; display:table-cell;}

JSfiddle显示我当前的布局：http://jsfiddle.net/34g8E/1/

Answer 1

这是因为float属性使元素块级别。如果您检查浮动元素，您将看到浏览器在计算的样式中使用display: block; ...无论您在CSS中写什么。

所以你的小提琴可能看起来像这样 - http://jsfiddle.net/skip405/34g8E/3/

使用display：table等于div高度

1 个答案: