- 2011-08-31 (水) 0:41
- HTML+CSS+JS
外枠の.figureBlockA01ブロックの横幅指定を100％にしているので、あらゆるサイズの横幅に適応できる。
また、画像boxの.imgLとテキストboxの.txtRは横幅を指定していないので、画像のサイズによって自動で調節して配置できるので便利！
コンポーネントとしてよく使うレイアウト
でも、.imgLのboxは幅を指定していないのでキャプションなどテキストをいれると文字可変した場合や文字数が多いとカラムがおちてしまう。
.imgLのboxは、画像のみにしないといけない
ここでは、floatを指定した要素の親要素の高さが算出されない時の解決手段として、外枠の.figureBlockA01ブロックにはclearfixのかわりにoverflow:hidden;を使っている。
Firefox2では、印刷のときに問題があったけど、もうFirefox2を対象ブラウザにいれなくていいと思うので。
HTML
<div class="figureBlockA01">
<p class="imgL"><img src="images/img01.jpg" alt="" width="100" height="100" /></p>
<p class="txtR">ここにテキストがはいります。</p>
</div>
CSS
.figureBlockA01{
width:100%;
overflow:hidden;*/clearfixのかわりに/*
}
.figureBlockA01 .imgL{
float:left;
}
.figureBlockA02 .txtR{
overflow:hidden;
padding-left:20px;
zoom:1;
}
Similar Posts:
- 今さらだけど、IE6対策中心のCSSメモ
- 使っているFirefoxの拡張機能（アドオン）【Firefox Add-ons】
- 色の勉強をこれからする方や配色に困ったら
- 使っているソフトやツール
- 美しいjQueryプラグインのメモ
Popular Posts:
Comments:0
Trackbacks:0
- Trackback URL for this entry
- http://wsmh.net/web/htmlcssjs/%e3%82%88%e3%81%8f%e4%bd%bf%e3%81%86overflow%e3%83%97%e3%83%ad%e3%83%91%e3%83%86%e3%82%a3%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9f%e3%83%ac%e3%82%a4%e3%82%a2%e3%82%a6%e3%83%88/trackback/
- Listed below are links to weblogs that reference
- テキストが画像の下に回り込むのを防ぐために、よく使うoverflowプロパティを使ったレイアウト from WSMH