デザインレイアウト 13


  • 本文

本文の位置を左右に反転させる場合は、<p>にclass="left"を入れる

--- HTML ---
<div id="box">
<ul>
<li><p><img src="img/photo.jpg" alt=""><br>
<img src="img/photo.jpg" alt=""></p>本文</li>
</ul>
</div>

--- CSS ---
#box {
 width:372px;
 min-height:212px;
 height:auto !important;
 height:212px;
 border:1px solid #ccc;
 font-size:80%;
}

#box ul {
 margin:0;
 padding:0;
 list-style-type:none;
}

#box li {
 margin:10px;
 text-align:justify;
 text-justify:disribute;
}

#box li p {
 width:125px;
 margin:0;
 text-align:right;
 float:right;
}

#box li p img {
 margin:2px 0 9px;
}

#box li p.left {
 width:125px;
 margin:0;
 text-align:left;
 float:left;
}