- ベストアンサー
floatについて
■ □ と並んでいた場合■にスタイルシートでfloat:leftとすると□が右にきますよね。( ■□となる) それで私はfloat:leftは『次に来る要素を自分の右に移動させる』と 解釈してました。 それで質問なのですが以下のタグの場合どうして最後に(.set1)にfloat:leftが必要なのでしょうか？ 次に要素がきていないからあっても意味がないと思ったのですが、実際 はずしてみると間に幅ができてデザインが崩れてしまいます。 また全体の枠を見えるよう最初のdivに.wakuで設定したのですがfloat:leftがあるときには長い一本の線になってしまいます。 どうしてこうなるのでしょうか？ <html> <head> <style type="text/css"> .waku{border-color:#cccccc;border-style:solid;border-width:3px;} .set1{border-color:#cccccc;border-style:solid;border-width:1px; width:150px;height:500px;background-color:white;color:#ffffff; margin:0 2.5;float:left;} .main{border-color:#cccccc;border-style:solid;border-width:1px; width:500px;height:500px;background-color:white;color:#ffffff; margin:0 2.5;font-weight:bold;float:left;} .set2{border-color:#cccccc;border-style:solid;border-width:1px; width:150px;height:500px;background-color:white;font-weight:bold; color:#ffffff;margin:0 2.5;float:left;} </style> <div class="waku" align="center"> <div class="set1"> <div>左1</div> <div>左2</div> </div> <div class="main">真ん中</div> <div class="set2">右</div> </div>
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
> それで質問なのですが以下のタグの場合どうして最後に(.set1)にfloat:leftが必要なのでしょうか？ <div>タグはブロック要素である為、通常の環境では前後に改行が入ってしまいます。 よって、横並びにするにはfloat:left;やdispray:inline;等で制御する必要があります。 > また全体の枠を見えるよう最初のdivに.wakuで設定したのですがfloat:leftがあるときには長い一本の線になってしまいます。 > どうしてこうなるのでしょうか？ こちらはちと説明が難しいのですが・・・簡単に言えば、「中身が高さの無い物だけだから」です。 その結果、中身の高さが0pxになり、結果横一本に見えてしまいます。(なので、あの線は3px*2=6pxの太さになっています。) 解決法としては.waku{}内でheight:を設定すれば大丈夫だったかと思います。
その他の回答 (1)
- partita
- ベストアンサー率29% (125/427)
>それで質問なのですが以下のタグの場合どうして最後に(.set1)にfloat:leftが必要なのでしょうか？ .set2の間違いですか？ また、.wakuにwidth属性を付加すると意図するレイアウトになるのでは？ さらに、これは私の考えであって、正しいかどうかわかりませんが、.wakuにheightを指定していないのが不自然に見えます。.set1のheightに応じて.wakuのheightが可変になっているとは限りません。
お礼
ご回答ありがとうございます！ すいませんset2の間違いでした。 なるほどhightを指定するのが普通なんですね。 http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2 ここを見つけたのですがどうやらfloatにしてると高さは無視されるみたいです。
お礼
ご回答ありがとうございます。 右に回り込む要素がブロック要素だから間に隙間ができるというのはなんとななくわかったのですが(■□ではなく■ □になる) 改行される＝隙間ができるというのがいまいちピンとこないです。 hightがなくても入れ囲の外枠だから中身があると思ったのですが 違うのでしょうか？floatがあるときだけこの現象が起こるというのも 謎です。 頭の回転が悪くいろいろ質問してしまってすいません(^^; でも回答ありがとうございました！