2008年9月29日
左右に画像やテキストがあるレイアウト
画像の下にテキストが回りこまないレイアウト | ヨモツネットを参考
ちょっとしたポイント
- display:table;,display:table-cell;を使う
- 外側のblockに、widthを指定する。%もオッケー
- 右に画像を配置する場合はdirection:rtl;とdirection:ltr;を使う
- その他、IE対策をもろもろ
/*----------------------------------------------------
figureBoxA01
----------------------------------------------------*/
.figureBoxA01{
width:100%;
display:table;
}
.figureBoxA01 div.image{
padding-right:20px;
display:table-cell;
vertical-align:top;
width:1%;
/width:auto;
/float:left; /* IE 6, 7 */
}
.figureBoxA01 div.text{
display: table-cell;
vertical-align: top;
/zoom:1; /* IE 6, 7 */
}
/*----------------------------------------------------
figureBoxB01
----------------------------------------------------*/
.figureBoxB01{
width:100%;
display:table;
direction:rtl;
text-align:right;
}
.figureBoxB01 div.image{
margin:0;
display:table-cell;
vertical-align:top;
width:1%;
/width:auto;
/float:right; /* IE 6, 7 */
}
.figureBoxB01 div.text{
padding-right:20px;
display:table-cell;
vertical-align:top;
/zoom:1; /* IE 6, 7 */
direction:ltr;
text-align:left;
}
</style>
</head>
<body>
<div class="figureBoxA01">
<div class="image"><p><img src="img/img01.gif" alt="" width="100" height="100" /></p></div>
<div class="text"><p>テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。</p></div>
<!--/figureBoxA01--></div>
<br />
<div class="figureBoxB01">
<div class="image"><img src="img/img01.gif" alt="" width="100" height="100" /></div>
<div class="text"><p>テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。</p></div>
<!--/figureBoxB01--></div>
トラックバック(0)
このブログ記事を参照しているブログ一覧: 左右に画像やテキストがあるレイアウト
このブログ記事に対するトラックバックURL: http://magic-happens.net/mt/mt-tb.cgi/33
コメントする