ボックスレイアウト 05

ボックス+段落

ボックス+段落

ボックス+段落

ボックス+段落

ボックス+段落

ボックス+段落

ボックス+段落

ボックス+段落


※右マージン指定の左基点スタイル(float:left)

--- HTML ---
<div id="box">
 <div class="box1">
 <p>ボックス+段落</p>
 <p>ボックス+段落</p>
 </div>

 <div class="box2">
 <p>ボックス+段落</p>
 <p>ボックス+段落</p>
 </div>

 <div class="box3">
 <p>ボックス+段落</p>
 <p>ボックス+段落</p>
 </div>

 <div class="box4">
 <p>ボックス+段落</p>
 <p>ボックス+段落</p>
 </div>
</div>

--- CSS ---
#box {
 width:500px;
 font-size:80%;
}

#box p {
 margin:10px;
 line-height:1.32em;
}

#box div {
 width:230px;
 min-height:30px;
 height:auto !important;
 height:30px;
 margin:0 10px 10px 0;
 border:1px solid #ccc;
}

#box .box1 {
 float:left;
}

#box .box2 {
 margin-right:0;
 float:left;
}

#box .box3 {
 margin-bottom:0;
 clear:both;
 float:left;
}

#box .box4 {
 margin:0;
 float:left;
}