質問: cssで、何故か、「float」が上手く効かない 詳しく書きますと、前回した質問、 http://oshiete.goo.ne.jp/qa/7786505.html の続きになります。 ちなみにこれは、今の所、解決した次第です。 しかし、新たな場面に直面している最中であります。 http://sky.geocities.jp/thanksv0358/index.html# 質問は、上記で作成しているページについてです。 その内容ですが、ページ中程にある「 今月のおすすめ 」とある、すぐ下の「 見出し3 」という2つの項目を先頭行にして、横一列にそろえて表示したいと思いました。 そのため、項目内容をhtmlで、 ~ と、 ~ で囲い、その後、それぞれをcssで、 .left{ float:left; } .right{ float:right; } としたにもかかわらず、何故か中途半端な形で、ずれている状態が確認できます。 これが現在、意味不明な箇所になっています。 ここで質問ですが、この場合、どうすれば「 見出し3 」の文字2つを並列に表示できますでしょうか? 詳しい方がいましたら、よろしくお願いします。
回答: 他の方への回答と混同していました。 先に示した回答のように ### 見だし ・・・・・ ### 見だし ・・・・・ として、 div.section{position:relative;} div.section div.section{ width:50%/* 49%くらいのほうが良い */ float:left; } 33%以下にすると、三つ並びますし、最小幅を決めておくとウィンドウ幅によって横に並んだり縦に並びます。 float:leftに続いてfloat:right;は、とってもまずいです。 説明済みです。 .left と言う書き方はcss1の時代の名残です。css2以降は、基点となるセレクタにつなげるセレクタを書くことになっています。 div.section ----- これは、要素セレクタdiv[class~=section"]と同じ意味 と書くのがルールです。 .sectionは、*.sectionを省略したものとみなされるだけです。もし書くなら *.sectionとかく癖をつけましょう。 断然その方がわかりやすいはずです。