デザインレイアウト 12

タイトル

本文1
本文2

本文の位置を左右に反転させる場合は、class="left"を削除する
画像の枚数を減らす場合は、イメージタグを削除する
画像のサイズを変更する場合は、#boxのwidth:396pxも変更する

--- HTML ---
<div id="box">
<p>タイトル</p>
<dl>
<dt>
<img src="img/pict.jpg" alt="">
<img src="img/pict.jpg" alt="">
<img src="img/pict.jpg" alt="" class="clear"></dt>
<dt class="left">
<img src="img/pict.jpg" alt="">
<img src="img/pict.jpg" alt="">本文1</dt>
<dd>本文2</dd>
</dl>
</div>

--- CSS ---
#box {
 width:396px;
 background:#f9f9f9;
 font-size:80%;
}

#box p {
 margin:0;
 padding:5px;
 background:#999;
 color:#fff;
}

#box dl {
 min-height:212px;
 height:auto !important;
 height:212px;
 margin:0;
 padding:10px 10px 0 10px;
 background:#f3f3f3;
 border:1px solid #ddd;
 text-align:justify;
 text-justify:distribute;
 line-height:1.32em;
}

#box dt {
 margin:0 0 10px;
}

#box dd {
 margin:0 0 10px;
}

#box img {
 margin:0 10px 10px 0;
 padding:3px;
 background:#fff;
 border:1px solid #ccc;
 float:left;
}

#box img.clear {
 margin-right:0;
}

#box .left img {
 margin:0 0 10px 10px;
 float:right;
}