- ベストアンサー
CSS 2段2列？についてです
css初心者です。 このようなボックスを作りたいと思ってます。 http://park17.wakwak.com/~shiyuan/test/1.gif このABCDのボックスなのですが floatでABを左右に振って その後<br clear="all">にして CDもfloatで左右に振る みたいな感じでいいのでしょうか？ それともAB,CDを囲むDIVのボックスを更に追加した方が いいのでしょうか？ 宜しくお願いします。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
ABに情報的なまとまりがある、とか CDは共通の背景を使用する、とか そういう決まりがない場合は 特にAB・CDを囲むDIVは必要ないのではないでしょうか。 管理のしやすさを優先して、左右にボックスを並べた場合は DIVで全体を囲む、などルールを設けても良いかと思います。 それよりも、 <br>タグのclear属性はcssに置き換えるべき…かもです。 cssで、br{clear:all;}としてあげれば代用できます。
その他の回答 (3)
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
CSSのclearプロパティの値、全解除はbothが正解だったはずです。 allだと上手く行かないことがあります。
お礼
ご指摘有難うございます そのようにさせて頂きますっ
<body> <div> <div>header</div> <div style="float:left;width:**">A</div> <div style="float:left;width:**">B</div> <br style="clear:both"> <div style="float:left;width:**">C</div> <div style="float:left;width:**">D</div> <br style="clear:both"> <div>footer</div> </div> </body> 一応body直下にbrを出さないために全体をdivでくくったとすると上のようになると思います。 <div>header</div> <div> <div style="float:left;width:**">A</div> <div style="float:left;width:**">B</div> </div> <div style="clear:both"> <div style="float:left;width:**">C</div> <div style="float:left;width:**">D</div> <div> <div style="clear:both">footer</div> 個人的には下のソースの方がスマートに感じます。 なんだかんだ言ってもブロック要素に改行が続くのは不自然で気になります。
お礼
なるほど～ 有難うございます
- glphon
- ベストアンサー率26% (41/152)
divを使ってという方法については理解しているようなので別の方法を。 <table width="600"> <tr valign="top"> <td width=70%><div style="border:1px solid #000;">a</div><br> <td width=30%><div style="border:1px solid #000;">b</div> </tr> </table> とする方法もあります。
お礼
回答有難うございました。 なるほどテーブルを使うとそうなりますね。 テーブルも初心者なのでやばいですw 有難うございましたっ。
お礼
回答有難うございます。 背景が関係するとDIVは必要ですね。なるほど～。 情報的なまとまりもないです。 全体囲むの忘れてましたw brもcssに置き換えるとは、芸がこまかいです～。 勉強になりました。有難うございましたっ。