0

我为我正在制作的响应式网格添加了一个 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>
4

3 回答 3

3

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

#half { min-height: 450px; }

而且您可能需要clear:both;在部分之间添加一个 div 。

于 2013-05-11T19:27:10.280 回答
1

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

#container {
    height: auto;
    display: table-row;
}
于 2013-05-11T19:25:04.627 回答
0

If you don't mind removing float:left on your #half divs you can use display:table-cell on them to make them stretch to the right height.

I updated your fiddle to illustrate: http://jsfiddle.net/FUSfs/3/

于 2013-05-11T22:23:27.113 回答