![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
図のような段組をしたいのですが、ソースはあっているでしょうか?
サイトを作成しているとズレたりするので、根本的な段組が間違っているのか見て頂けると助かります。
■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;
}
![「CSS:floatを使っての段組で困って」の質問画像](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/8/324666_5497cf26541d8/M.jpg)
No.1ベストアンサー
- 回答日時:
・添付画像のBOX-1にあたるスタイルがありませんが?それとも、BOX-1とは、<div id="container">直下に置き<div id="box-2">の前で終わる要素の事ですか?
・#box-567に相当するマークアップがありませんが?それとも、#box-5、#box-6、#box-7は#box-567の子要素に対するスタイルとして考えてますか?であればマークアップ部分は
(省略)
<div id="box-567">
<div id="box-5">box-5</div>
<div id="box-6">box-6</div>
<div id="box-7">box-7</div>
</div>
(省略)
とならねばなりませんん。
・box-2は幅800pxで1カラムの描画ですからfloatは不要です。
それから、各カラムの高さが全て決め打ちになっていますが、中に入る要素はその高さを超える心配のないもの(画像)ですか?
#高さをはみ出した場合を考慮しなくても良いものですか、という事です。
お返事ありがとうございます。
<div id="box-567">
(省略)
</div>
は記入ミスです。
box1は書かなくて良いのかと思っていました・・・
では、CSSを
#box-1 {
width: 800px;
}
#box-2 {
width: 800px;
height: 30px;
}
(下省略)
にしてHTMLを
<body>
<div id="container">
<div id="box-1">box-1</div>
<div id="box-2">box-2</div>
<div id="box-3">box-3</div>
<div id="box-4">box-4</div>
<div id="box-567">
<div id="box-5">box-5</div>
<div id="box-6">box-6</div>
<div id="box-7">box-7</div>
</div>
<div id="box-8">box-8</div>
</div>
</body>
をこうすれば大丈夫ですか?
カラムはbox-5.6.7以外は画像で決め打ちです。
5.6.7の部分は高さを超えた時を考えたほうがよさそうですね。
No.3
- 回答日時:
#containerがフローとしていない場合。
box1:clear-both
box2:clear-both
box8:clear-both
box3:float-left
box4:float-right
box5:float-left
bos6:float-left
box7:float-right
くらいでもいけます
ただし、罫線の横線は
<div></div>を挿入してボーダーで代用してください。
簡単でしょ?
No.2
- 回答日時:
No.1です。
> box1は書かなくて良いのかと思っていました・・・
いえ、先の回答で「BOX-1とは、<div id="container">直下に置き<div id="box-2">の前で終わる要素の事ですか?」とおたずねした通り、”そうであれば(#box-1として#containerとは違う新たなスタイル(幅だけでなくボーダーや背景色など)を与えたいのでなければ)”、わざわざbox-1というコンテナを作る必要はありません。
#対になるスタイルが見あたらなかったので、確認の為その様にお聞きしただけです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Ctrl+F(検索)の窓を出したいの...
-
width 100% で縦に3段のレイア...
-
css固定したフッターが本文と重...
-
左○○px、右は残りの幅(100%-左...
-
マウスオーバーのメニューについて
-
文字をクリックしたら別の文字...
-
YES or NO形式で進んで行く、タ...
-
【コーディング】途中から位置...
-
Flickity で画像にリンクを貼る...
-
Firefoxで下の隙間が開く
-
CSSで、左側にあるGlobalNaviga...
-
コンテンツとコンテンツの詰まり
-
テーブルの1つのセル内で、上揃...
-
3カラムのサイトでfloatができない
-
画像の特定の座標にカーソルが...
-
CSSでフローとした際の親要素の...
-
<div valign=bottom> は効かな...
-
リンクで違うページの指定箇所...
-
TABLEの高さを固定したいのですが…
-
こんな表示はできそうですか?...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
CSS <div>の入れ子が反映さ...
-
Ctrl+F(検索)の窓を出したいの...
-
css固定したフッターが本文と重...
-
textareaで入力した文字を改行...
-
オンマウス時に別画像を上に重...
-
文字を固定したいのですが…
-
スクロール可能なチェックボックス
-
divのheight指定で画面一杯に表...
-
Flickity で画像にリンクを貼る...
-
スタイルシートで画面を上下に...
-
1行で左寄せと右寄せと中央揃え...
-
CSS のみのタブ切り替えについて
-
CSS 可変マージン
-
HTMLですCSSです この画像のよ...
-
チェックボックスの背景色って...
-
HTMLですCSSです 画像のように...
-
画像の特定の座標にカーソルが...
-
TABLEの高さを固定したいのですが…
おすすめ情報