画像 + テキスト（回り込みあり）
スマフォは回り込みが解除され、画像、テキストの順で表示されます。
左画像 + テキスト（回り込みあり）
sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text link
<p class="fsL group"> <img src="/responsive/resources/images/dummy_pict.gif" alt="dummy" class="sImage floLm"> sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / <a href="#">sample text link</a> </p>
右画像 + テキスト（回り込みあり）
sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text link
<p class="fsL group"> <img src="/responsive/resources/images/dummy_pict.gif" alt="dummy" class="sImage floRm"> sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / sample text. / <a href="#">sample text link</a> </p>
2カラム 画像 + テキスト（回り込みなし）
スマフォなどの画面の小さな端末では画像が中央寄せになります。
2カラム 左画像 + テキスト（回り込みなし）
sample text. / sample text. / sample text. / sample text link
sample text. / sample text. / sample text. / sample text link
<div class="group mb10"> <div class="pane2 floL group"> <p class="fFloLm sTaC"><img src="/responsive/resources/images/dummy_pict.gif" alt="dummy" width="100"></p> <p class="fRect"> sample text. / sample text. / sample text. / <a href="#">sample text link</a> </p> </div> <div class="pane2 floR group"> <p class="fFloLm sTaC"><img src="/responsive/resources/images/dummy_pict.gif" alt="dummy" width="100"></p> <p class="fRect"> sample text. / sample text. / sample text. / <a href="#">sample text link</a> </p> </div> </div>
2カラム 右画像 + テキスト（回り込みなし）
スマフォなどの画面の小さな端末では画像が中央寄せになります。
sample text. / sample text. / sample text. / sample text link
sample text. / sample text. / sample text. / sample text link
<div class="group mb10"> <div class="pane2 floL group"> <p class="fFloRm sTaC"><img src="/responsive/resources/images/dummy_pict.gif" alt="dummy" width="100"></p> <p class="fRect"> sample text. / sample text. / sample text. / <a href="#">sample text link</a> </p> </div> <div class="pane2 floR group"> <p class="fFloRm sTaC"><img src="/responsive/resources/images/dummy_pict.gif" alt="dummy" width="100"></p> <p class="fRect"> sample text. / sample text. / sample text. / <a href="#">sample text link</a> </p> </div> </div>
2カラム 画像 + テキスト
スマフォなどの画面の小さな端末はテキストが回りこみます。
2カラム 左画像 + テキスト
sample text. / sample text. / sample text. / sample text link
sample text. / sample text. / sample text. / sample text link
<div class="group mb10"> <div class="pane2 floL group"> <p class="floLm"><img src="/responsive/resources/images/dummy_pict.gif" alt="dummy" width="70"></p> <p class="fRect"> sample text. / sample text. / sample text. / <a href="#">sample text link</a> </p> </div> <div class="pane2 floR group"> <p class="floLm"><img src="/responsive/resources/images/dummy_pict.gif" alt="dummy" width="70"></p> <p class="fRect"> sample text. / sample text. / sample text. / <a href="#">sample text link</a> </p> </div> </div>
2カラム 右画像 + テキスト
sample text. / sample text. / sample text. / sample text link
sample text. / sample text. / sample text. / sample text link
<div class="group mb10"> <div class="pane2 floL group"> <p class="floRm"><img src="/responsive/resources/images/dummy_pict.gif" alt="dummy" width="70"></p> <p class="fRect"> sample text. / sample text. / sample text. / <a href="#">sample text link</a> </p> </div> <div class="pane2 floR group"> <p class="floRm"><img src="/responsive/resources/images/dummy_pict.gif" alt="dummy" width="70"></p> <p class="fRect"> sample text. / sample text. / sample text. / <a href="#">sample text link</a> </p> </div> </div>
2カラム 定義済みリスト
2カラム 定義済みリスト
<div class="group mb10"> <dl class="fPane2 fFloL over"> <dt class="fb">20XX-MM-DD</dt> <dd><a href="#">News Text News Text News Text News Text News Text News Text News Text News Text News Text more...</a></dd> </dl> <dl class="fPane2 fFloR over"> <dt class="fb">20XX-MM-DD</dt> <dd><a href="#">News Text News Text News Text News Text News Text News Text News Text News Text News Text more...</a></dd> </dl> </div>
2カラム 定義済みリスト + (画像 + テキスト)
<div class="group mb10"> <dl class="fPane2 fFloL over"> <dt class="fb">20XX-MM-DD</dt> <dd class="group"> <img src="/responsive/resources/images/dummy_pict.gif" alt="dummy" class="floLm" width="60"> <a href="#">News Text News Text News Text News Text News Text News Text News Text News Text News Text more...</a> </dd> </dl> <dl class="fPane2 fFloR over"> <dt class="fb">20XX-MM-DD</dt> <dd class="group"> <img src="/responsive/resources/images/dummy_pict.gif" alt="dummy" class="floLm" width="60"> <a href="#">News Text News Text News Text News Text News Text News Text News Text News Text News Text more...</a> </dd> </dl> </div>