<h4># height設定なし</h4>
<p>3の要素が1,2の下に回り込んでいる。</p>
<div class="non-height">
<div class="d1">1</div>
<div class="d2">2</div>
</div>
<div class="d3">3</div>
<div style="clear:both;"></div><br><hr >
<h4>height設定あり(1)</h4>
<p>回り込む部分をずらして表示。</p>
<div class="height1">
<div class="d1">1</div>
<div class="d2">2</div>
</div>
<div class="d3">3</div>
<div style="clear:both;"></div><br><hr >
<h4>height設定あり(2)</h4>
<p>子要素サイズと親要素サイズのバランス調整が難しい。</p>
<div class="height2">
<div class="d1">1</div>
<div class="d2">2</div>
</div>
<div class="d3">3</div>
.height1{
/* 子要素よりも大きい値を設定
子要素:100px + solid:3px * 2(両辺分) = 106px
*/
height:106px;
}
.height2{
/* 子要素よりも小さい値を設定
子要素:100px + solid:3px * 2(両辺分) = 106px
*/
height:60px;
}
.d1, .d2, .d3{
height:100px;
border:solid 3px;
}
.d1{
width:100px;
background-color:lime;
float:left;
}
.d2{
width:80px;
background-color:skyblue;
float:left;
}
.d3{
width:150px;
background-color:orange;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.