<style> .box {margin:10px;padding:10px;background-color:#ccc;} .ad_area {float:right;width:180px;padding:0px 10px 10px 10px; background-color:#fff;} .ad_inner {border:solid 1px #888;padding:9px;} .ad_item {border-top:dotted 1px #888;padding-top:5px;margin-top:5px;} </style> <div style="margin:100px"> <div class="ad_area"> <div class="ad_inner"> <div style="text-align:center"><b>広告</b></div> <div class="ad_item">あああ あああ あああ</div> <div class="ad_item">あああ</div> <div class="ad_item">あああ</div> </div> </div> <div class="box">あああ あああ あああ</div> <div class="box">あああ あああ あああ</div> <div class="box">あああ あああ あああ</div> <div class="box">あああ あああ あああ</div> <br clear="all"> </div>
問題点は「広告」をh*に、ad_itemはul/liに、それらによっていらない具体的なご指摘ありがとうございます。ul/li か、なるほど。
クラスが出てくる、br clear=allってなんだよ、style属性いっさい必要
なくね? ぐらいか。
ただ、ぐちゃぐちゃの本質は、セレクタで整理して済む部分ではなく、<div ...><img src="..." (float:left)> ... <br clear="all"></div> <div ...><img src="..." (float:left)> ... <br clear="all"></div> <br clear="all">
書き方なら自分内ルールでいいやと思うこのごろ。chepookaさんのコメント:
そしてこれはひどい。。。
FirefoxでもIEのようにFloatさせたやつでマージンとるとその分してないこれか。
側のブロックが削られるように表現されるようにするのは結構面倒なんで
すよね。IEの仕様の方が綺麗な場合があるから(はてブのタグ一覧とか特
にそうだけど)、そうするとこれみたいに白背景でその中の要素にボーダー
組むとかそういう荒業を使わなきゃいけなくなるっていう。そういうのっ
てFFでできるのかしら。
2006年08月20日 hxxk これはひどい, HTML, CSS
突っ込みどころが多すぎるけど多分突っ込まない。文法としては間違って
はいないけど無駄が多いというかCSSの本質を全く無視しているというか。
- Clearing floats: http://www.quirksmode.org/css/clearing.htmlbody > div.ad_f_r { margin: 0 10px; }