• 締切済み

float: left; が必要なわけ

floatで段組を仕様としているのですが、あと一歩納得いかないところがあるので、教えてください。 <div>要素を二つ横に並べるのですが、 一つ目の<div>要素に"float: left;"を指定するのは納得がいくのですが、二つ目にもfloat: "left";を指定しなければならない理由が分かりません。 そのまま何も付けなくても回り込みがされるのではないのですか？ ＃今作っているページではfloat: right;を指定しています。 ↓のページ中段の例を見て不思議に思い、調べてみたのですが思い通りのページがなかったので質問しました。 http://www.motchie.com/article/multicolumn.html

  • CSS
  • 回答数1
  • ありがとう数2

みんなの回答

  • gicchon
  • ベストアンサー率34% (25/72)
回答No.1

<DIV>要素を2つ並べるだけなら、2つ目にFLOAT指定しなくてもいいです。 あなたが見たページは<DIV>要素を３つ並べているので2つ目にもFLOAT指定が有ります。 あなたが作っているページの<DIV>要素が2つしか無いなら、2つ目にはfloat: right;の指定が不要です。 また、2つ目にfloat: right;の指定をつけた場合、要素が3つ以上になったとき、2つ目の要素が一番右に来るはずです。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • float:left; したものを右寄せ

    <div style="text-align:right;"> <ul> <li style="float:left;">リスト</li> <li style="float:left;">リスト</li> <li style="float:left;">リスト</li> </ul> </div> リスト要素を横に並べるようにfloat:left;をいれたものを、 画面右寄せにするにはどうすればいいでしょうか。 上のソースではtext-align:right;が効かず左よせになってしまいます。。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 段組でfloat:leftとfloat:rightの違い

    こんにちは！ 今スタイルシートで段組をやっているんですが 2カラムの右側がfloat:leftとfloat:rightでは微妙に表示が変わります 段組の間のスペースが広くなったり狭くなったりです firefoxで表示するのに左をfloat:left、右をfloat:rightにすると 右側の段組が実現されず下に落ちてしまいます。 通常2カラムの場合の段組はどのように指定するのが正しいのでしょうか？ 過去の質問や、googleで検索しましたがどちらも場合も正しいとか誤ってるという意見が半々で どうにも判断がつかず悩んでいます。 3カラムでもfloat:left float:left float:left　とやっているのもあるので こちらが正しいのかな？とも思いましたが やはりそれは違って float:left float:right float:leftが正しいという方もいらっしゃいます 通常段組を組む際はどちらが規格に沿っているのか教えていただけないでしょうか？ よろしくお願いします。

    • ベストアンサー
    • CSS
  • floatでレイアウトした後にcleafixは必ず必要ですか？

    いつもお世話になっております。 早速質問ですが、floatを使用してレイアウトした箇所には必ずclearfixを指定しなければならないのでしょうか？ 例えば以下のレイアウトでテキストを組んでみたのですが、winXPのIE7、IE6、opera9、FireFox3、では問題なく表示されていました。 それで外枠のBOXの幅が設定されており、float指定した要素の親要素に高さの指定があり、float指定した要素の親要素の下に外枠と同じ幅の画像やdivがあればclearfixを記述しなくてよいのではと考えたのですが、仕事でWEBを制作しないといけない為、確認しておきたくて投稿しました。 ご回答を宜しくお願いします。 〔XHTML〕 <body> <div id="wrapper"> <div id="header"> <div id="header01">AAA</div><div id="header02">BBB</div> </div><!--end header--> <div id="pankuzu">ccc</div> <div>111</div> <div>222</div> </div><!--end wrapper--> </body> 〔css〕 #header{ text-align:left; width: 900px; height:150px; } #header01 { float: left; width: 400px; } #header02 { float: left; width: 450px; height: 150px; } #pankuzu{ width: 900px; height: 20px; background-color:#999; }

    • ベストアンサー
    • HTML
  • CSSで、何故か、「float」が上手く効かない

    詳しく書きますと、前回した質問、 http://okwave.jp/qa/q7786505.html の続きになります。 ちなみにこれは、今の所、解決した次第です。 しかし、新たな場面に直面している最中であります。 http://sky.geocities.jp/thanksv0358/index.html# 質問は、上記で作成しているページについてです。 その内容ですが、ページ中程にある「 今月のおすすめ 」とある、すぐ下の「 見出し3 」という2つの項目を先頭行にして、横一列にそろえて表示したいと思いました。 そのため、項目内容をHTMLで、 <div class="left"> ～ </div> と、 <div class="right"> ～ </div> で囲い、その後、それぞれをCSSで、 .left{ float:left; } .right{ float:right; } としたにもかかわらず、何故か中途半端な形で、ずれている状態が確認できます。 これが現在、意味不明な箇所になっています。 ここで質問ですが、この場合、どうすれば「 見出し3 」の文字2つを並列に表示できますでしょうか？ 詳しい方がいましたら、よろしくお願いします。

  • floatタグの使い方

    FOM出版　WEBクリエイター検定　初級のテキスト問題で分からないことがあります。 詳しいかたお力をおかしください。 htmlファイルの記述ーーー（少し簡略化してます） <!DOCUTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www3c.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="left"> <p>古代の七不思議</p> </div> <div class="right"> <p>古代の七不思議</p> </div> </body> </html> CSSの記述ーーー .left{color:#000000; background-color:#cccc99; padding:10px; margin-left:10px; width:300px; float:left; } .right{color:#000000; background-color:#cccc99; padding:10px; margin-left:350px; width:300px; } これが正解のようで、クラスleftの右にクラスrightが回り込みます。 しかし僕にはクラスrightに記述したmargin-left:350px;がよく分かりません。 divタグでボックスを二つ創ってあるので、.leftにfloat:left;の記述をして .rightが回り込んで.rightにmargin-left:10px;記述とかで隙間が開くのだと思っていました。 ちなみに.rightのmargin-left:350px;を10pxにして.rightにもfloat:left;とかけるとうまく回り込みます。これもよくわかりません。 つたない文章で分かりづらいかもしれませんが、どうか解説をお願いいたします。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSS：floatを使っての段組で困っています

    図のような段組をしたいのですが、ソースはあっているでしょうか？ サイトを作成しているとズレたりするので、根本的な段組が間違っているのか見て頂けると助かります。 ■HTML <body> <div id="container"> <div id="box-2">box-2</div> <div id="box-3">box-3</div> <div id="box-4">box-4</div> <div id="box-5">box-5</div> <div id="box-6">box-6</div> <div id="box-7">box-7</div> <div id="box-8">box-8</div> </div> </body> ■CSS body { margin: 0 auto 0 auto; padding: 0px; height:100%; } #container { width: 800px; } #box-2 { float: left; width: 800px; height: 30px; } #box-3 { float: left; width: 400px; height: 300px; } #box-4 { float: left; width: 400px; height: 300px; } #box-567 { clear:left; float: left; width: 800px; } #box-5 { float: left; width: 300px; height: 200px; } #box-6 { float: left; width: 300px; height: 200px; } #box-7 { float: left; width: 200px; height: 200px; } #box-8 { clear:left; width: 800px; }

    • ベストアンサー
    • HTML
  • div#left {width:50%;

    div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} がfloatされません。なぜでしょうか？ <html> <head> <title>a</title> <style type="text/css"> <!-- div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} --> </style> </head> <body> <div id="left"> left </div> <div id="right"> right </div> </body> </html> これでなぜならないのでしょうか？

  • 【css】floatを指定するとはみ出します

    ブロック要素をfioatで横並びにした際に、画像とテキストが全体を囲っている要素（親要素）からはみ出すことが多々あります。 その度に高さを指定して回避しているのですが、こちらはその他に回避の方法というのはあるのでしょうか？ それとも、自分の記述がおかしいのでしょうか？ 例えば下記の例です。 こちらは左に画像、右にタイトルとコメントが入ります。 <div class="aaa"> <div class="left"><img src="photo.jpg" width="180" height="120"></div> <div class="right"> <h3 class="title">タイトルです</h3> <div class="comment">コメントです</div> </div> </div> //////////////////////////////////// .aaa{ margin-bottom: 5px; padding-top: 7px; padding-right: 10px; padding-bottom: 7px; padding-left: 10px; clear: both; } .left{ float: left; height: 120px; width: 180px; } .right{ float: left; padding-left: 10px; width: 380px; } .title{ font-size: 90%; line-height: 120%; padding-right: 10px; padding-left: 10px; width: 360px; padding-top: 3px; padding-bottom: 1px; clear: both; } .comment{ font-size: 80%; line-height: 120%; padding: 5px; clear: both; }

  • floatをfooterに指定すると正しく表示ができない。

    floatをfooterに指定すると正しく表示ができない。 画像の(3)のようにfooterにfloat:leftを指定しなければ綺麗に表示されるのは分かります。ところが、画像の(1)や(2)のように、footerにfloat:left;を指定して、次の行で<div style="clear:left"></div>と指定して、footerにfloat:leftを指定しなかったのと同様の処理をすると、(1)や(2)のようにwidthに対して様々な現象が起きてしまいます。 (1)はwidthを指定しない場合、width:auto;を指定した場合に見られ、(2)はwidth:100%;とした場合にwrapperよりはみ出すという現象が起きます。なぜ、floatを指定しないのと指定後解除するのとで同様の結果が得られずに違った結果になるのでしょうか？わかる方いらっしゃいましたら回答宜しくお願い致します。 以下はソースでそのままエディタに貼り付けると表示できます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>サンプル</title> <style type="text/css"> <!-- /* default.css */ #container { background:red; border:10px solid fuchsia; padding:10px; } #left { float: left; width: 200px; height:100px; background:yellow; } #right { float: left; border:5px #000 solid; width: 200px; height:200px; background:black; color:#FFF; } #footer { float: left; height:200px; background:blue; border:5px #000 solid; color:#FFF; } --> </style> </head> <body> <div id="wrapper">WRAPPER <div id="header">HEADER</div> <div id="container">CONTAINER <div id="left">LEFT </div> <div id="right">RIGHT </div> <br style="clear:left"/> </div> <div id="footer">FOOTER </div> <div style="clear:left"></div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • CSS(初歩的）な質問です…floatの解除

    大変初歩的な質問でごめんなさい。 フローとの解除について教えて下さい。 例） <div id="main"> <div id="left"> </div> <div id="right"> </div> </div> とあり、 #main{ width : 1000px ; } #left , #right{ width : 500px; float : left ; } と、指定するとします…（ＣＳＳ、ＨＴＭＬは最低限しか書いていませんが。。。 ＨＴＭＬは4.01か、ＸＨＴＭＬあたりでお願いします。ＨＴＭＬ5はまだまだ…… このあと、#leftと#rightの次には</div>がありますが、この場合、clear : left (both);はどこに指定すればよいのでしょうか？もしくは、指定する必要が無いのでしょうか？ 大変初歩的ですがよろしくお願いいたします。

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する