borderの範囲を伸ばす方法と画像の配置について

2009/06/05 11:46

このQ&Aのポイント

cssコーディングに関する質問です。特に、borderの範囲を伸ばす方法と、画像を右に配置した場合の表示についての方法について知りたいです。
現在、指定したスタイルとHTMLを使用していますが、float:rightとclear:bothの設定をすると、borderの一部が表示されず、画像の延長上で表示されてしまいます。
右に画像を配置し、伸ばしたいborderの範囲を指定する方法について教えてください。

santamo
お礼率46% (7/15)

HTML
回答数1
ありがとう数2

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

abril
ベストアンサー率69% (388/560)

2009/06/05 12:08 回答No.1

floatをクリアする場所が適切ではないので、style1が子要素の高さを認識できておらず、結果としてfloatしていない子要素のpの高さまでしかボーダー描画されない状態になっています。まずはそこを解消します。あと、画像のレイアウトもグルーピングの方法を変えた方がベターかと思います。 ---------------------------------------------------------------------- 【CSS】 ---------------------------------------------------------------------- #style1 { zoom: 100%; width: 500px; padding: 15px 0 0 15px; border-left: 1px solid #ccc; border-top: 1px solid #ccc; } #style1:after { height: 0; visibility: hidden; content: ""; display: block; clear: both; } #style1 p { margin: 0; padding: 0; } .style2 { float: right; margin: 0 0 0 30px; } .style2 img{ display: block; margin: 0 0 20px 0; padding: 0; } ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- <div id="style1"> <div class="style2"> <img src="sample.jpg" width="200" height="200"> <img src="sample.jpg" width="200" height="200"> </div> <p>サンプル（以下略）</p> </div> ---------------------------------------------------------------------- 不具合、ご希望に添わない点等ありましたら補足して下さい。

質問者