Question

我为我正在制作的响应式网格添加了一个JSfiddle： http://jsfiddle.net/dankellaway/FUSfs/1/

每一半的一半都有不同的文字。我希望两个div的列具有相同的高度。两半都在容器div内。如何在不设置固定高度的情况下使它们尺寸相同？无论div中的文本数量多少，我都希望两者都能扩展。感谢。

代码：

CSS

#page {
width:95%;
text-align:center;
margin:auto;
}
#row {
height:100%
}
#container {
height: auto;
}
#header {
width:100%;
background-color: rgb(0, 143, 213);
height:50px;
}
#full {
width:99%;
margin:0.5%;
background-color:blue;
}
#half {
width:48%;
margin:0.5%;
padding:0.5%;
float:left;
background-color:yellow;
height:100%;
}
#third {
width:32.333%;
float:left;
margin:0.5%;
background-color:blue;
}
#quarter {
width:23%;
margin:0.5%;
padding:0.5%;
float:left;
background-color:blue;
height:100px
}

HTML

<div id="container">
<div id="half">
    <h1>Half 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</div>
<div id="half">
    <h1>Half 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in.      

</div>
</div>
<div id="third">Third</div>
<div id="third">Third</div>
<div id="third">Third</div>

Answer 1

我不确定是否有办法在没有设定高度的情况下解决这个问题。但是如果你想猜测平均高度，我会给.half添加一个最小高度，这可以让它根据需要增长。

#half { min-height: 450px; }

你可能需要在两个部分之间使用clear:both; div。

Answer 2

只需将#container设置为display: table-row;

即可

#container {
    height: auto;
    display: table-row;
}

Answer 3

如果你不介意移除你的#half div上的浮动：你可以使用display:table-cell使它们伸展到正确的高度。

我更新了你的小提琴来说明：http://jsfiddle.net/FUSfs/3/

响应网格中列间的自动div高度

3 个答案: