固定幅divに収まるようにCSS/HTMLレイアウトのdiv

私はCSSが初めてで、珍しいものを作成しようとしています。固定幅divに収まるようにCSS/HTMLレイアウトのdiv

マイコード：

<body> 
<div style="background-color:#C1C1C1; height:100%;"> 
    <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div1 
    </div> 
    <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div2 
    </div> 
     <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div3 
    </div> 
     <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div4 
    </div> 
     <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div5 
    </div> 
     <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div6 
    </div> 
     <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div7 
    </div> 
</div> 
</body>

の画面が250ピクセルの高さであるとしましょう - >メインのdivの高さは、あまりにも、その後250ピクセルになります。

結果：私はfloatを設定することを知っている

div1 
div2 
div3 
...

：左;

div1 div2 div3 div4 div5 ....

のようにそれらを表示します私が取得したいと思います：

div1 div3 div5 div7 
div2 div4 div6

それは水平ギャラリーのようなものです。さらに、divが増えると、main divの幅を可変にしてxスクロールバーを追加することは可能ですか？

これはInternet Explorer 7以上でのみ動作するはずです。また、JavaScriptもオプションです。

ありがとうございます！あなたが達成しようとしている何

出典

2011-08-11 Ion Bazan

意味的には、DIVの代わりにスタイル付き順序なしリスト（UL LI）を使用する必要があります。 –

マークアップをまったく変更できますか？ – Josh

どのブラウザ/バージョンをサポートする必要がありますか？ JavaScriptやjQueryは絶対に必要なオプションですか？ – thirtydot

はCSS3と非常に簡単です：http://jsfiddle.net/Ykkyg/

それフィドルはそれのための標準的なCSSを提供し、Webkitの（サファリ、クローム）とのGecko（Firefoxの）用のエンジン固有のプロパティ。

はまず、IE doesn't support it：

は、しかし、このアプローチの問題点がいくつかあります。
第2に、その列のセットがブラウザのウィンドウよりも大きくなると、ユーザーは1つの連続するテキストを読み取るために上下にスクロールします。これは吸う。 CSS3なし

、あなたは慎重にすべての要素先験的サイジングすることによって、この効果を得ることができ、それはスケールしない、と私は関与していない問題に対する一般的な解決策を知っている怖いですいくつかの非自明のjavascript。

出典

2011-08-11 16:59:23 pdpi

あなたの答えをありがとうが、私はCSS3なしで動作する必要があります（ええ、私はCSS3がはるかに簡単に多くのことを行うことがわかります） –

固定幅divに収まるようにCSS/HTMLレイアウトのdiv

答えて

関連する問題