0

我有一个使用多个容器和浮动 div 的非常基本的布局，我也在使用 box-sizing:border-box; 消除混乱的边框和填充百分比。我决定使用 display:table 技术来实现相等的 div 高度，但似乎根本无法让它工作。display:table 应用于内部容器， display:table-row 应用于单元格容器， 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/

4

1 回答 1

1

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

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

于 2013-06-18T16:00:42.793 回答