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 に答える
0

divの float:left を削除してもかまわない場合は、それらを#half使用して、div を適切な高さに伸ばすことができます。display:table-cell

説明するためにフィドルを更新しました：http://jsfiddle.net/FUSfs/3/

于 2013-05-11T22:23:27.113 に答える