上から下への左→右の配置要素

Question

私は4または5のサブ<div>を保持するメインコンテナ<div>を持っています。容器は、一定の高さと一定の幅を有する。サブdivの位置を上から下、左→右の順に並べる最適な方法は何ですか？

私はサブディビジョンをフローティングにしようとしましたが、それはちょうど私に左→右、上から下の順番を与えます。サブのdivは、変数の高さが、一定の幅を持つことができること

<div id="container"> 
    <div class="subdiv">sub div 1...</div> 
    <div class="subdiv">sub div 2...</div> 
    <div class="subdiv">sub div 3...</div> 
    <div class="subdiv">sub div 4...</div> 
    <div class="subdiv">sub div 5...</div> 
</div> 

注意：私は、このようなコードをマークアップするとき

は基本的に私はこの

[ sub div 1][sub div 3][sub div 4] 
[ sub div 2][   ][sub div 5] 

をしたいです。

が

Answer 1

私の知る限りでは、それを行うための方法はありません。

複数列のレイアウト（-moz-column-widthなど...）をサポートする一部のブラウザでのみ動作するCSS3がありますが、コンテンツ内のDIVで動作するかどうかはわかりません。そして、私はそれがIE7

で、私はそれがネイティブでこれを行うための唯一の方法はにある3列のコンテナ

<div id="container"> 
    <div class='column'> 
     <div class="subdiv">sub div 1...</div> 
     <div class="subdiv">sub div 2...</div> 
    </div> 
    <div class='column'> 
     <div class="subdiv">sub div 3...</div> 
     <div class="subdiv">sub div 4...</div> 
    </div> 
    <div class='column'> 
     <div class="subdiv">sub div 5...</div> 
    </div> 
</div> 

Answer 2

はdiv要素で、このCSSを使って、ありがとう：

display: inline-block 

Answer 3

にコンテンツを分割することですやるだろうな方法をサポートしていないことかなり確信していますCSS3の列を使用してください（Dampの説明を参照）。しかし、this questionのように、JavaScriptで同様の効果を得る方法に関する記事があります。その場合は、実際にはあなたよりも複雑です。

私は、JSでそれを行う最善の方法は、最初にDampが最良の推測で示唆したように、最初に列のコンテナに分割することだと考えています。これは、JSを無効にしている人には役立つでしょう。それから、最初の推測が外れていれば、サブディビジョンの高さを測定して移動させてください。ページを生成するためにサーバー側言語を使用していると仮定すると、列を均等に分割できるはずです。おそらく、サブディビジョンの可能性の高い高さのヒューリスティックとしてコンテンツの長さ（テキストを前提とする）をチェックすることによって、分割についての良い見積りを行うことさえできます。