HTML/CSSでの列の実装

Question

私は、テキスト情報を含むDIVの束を持っています。それらはすべて同じ幅（おそらく400px程度）ですが、高さは異なります。スペース上の理由から、私はこれらのDIVの2つまたは3つの列を持っていたいと思います。下記の魅力的なアスキーアートをご覧ください:)

DIV1  DIV3 
DIV1  DIV3 
DIV1  
DIV1  DIV4 
DIV1  DIV4 
DIV1  DIV4 
      DIV4 
DIV2  DIV4 
DIV2 

DIVはJavaScriptで駆動され、ページ読み込み時に高さが変わります。私も順序を変えてはいけません（各DIVにはタイトルがあり、アルファベット順に並べ替えられています）。

これまでのところ、私はそれを行う良い方法を見つけていません。 HTMLの流れは、左から右、次に上から下に向かいますが、上から下、そして左から右が必要です。

2つの列を持つテーブルの簡単な実装を試みましたが、1つの列にDIVがあり、もう1つの列にDIVがありました。それが合理的に見える時がある（各列のDIVの平均高さが近づくと）、もう半分はひどく見える。

もし私がjavascriptの達人であれば、彼らが拡大してからDIVを測定し、それらを合計して、実行時にあるテーブルの列から別のテーブルの列に移動することができると思います...しかし、それは私の能力を超えています。とにかくそれが可能であるかどうかわからない。

提案がありますか？

おかげ

UPDATE：コメントの

感謝。私は質問をするのが苦労したことは明らかです:(

DIVは、同様のコンテンツを含む/グループ化する単なる方法であり、実際にはレイアウトそのものを使用しているわけではありません。私はちょうどページにそれらを吐きだしたいと思います。魔法のように :) 2列の高さはほぼ同じです - 新聞の列のように2列に並べます。私はDIVがどれほど高いのか分からないので、各DIVをどの列に入れるのか分かりません（高さを知っていれば、2つの表のセルに分割しますが、知っている）。したがって、上記の例は単なる例にすぎません。実行時に、DIV 1が他の3つの組み合わせよりも大きくなる場合があります（この場合、DIV2はcolumn2の先頭に浮動する必要があります）。あるいは、DIV 4が大きなもの（その場合にはdiv要素1、2及び3は、すべてのカラム1にあるであろう、とDIV4はCOLUMN2に一人ですることができる）

基本的に私は2つの列を作成して、魔法のコンテンツを持つ方法があった期待していました必要に応じて（Wordのように）第1列から第2列に流れます。私はこれができないと思うが、私のHTML/CSSの知識はかなり基本的なので多分...？そのような

Answer 1

ドラフトCSS3 multi-column modelは、あなたが望むことをします。 Firefoxは-moz versions of some of the propertiesとSafari/Chrome -webkit versionsをサポートしているようです。私はIE8やOperaについて知らない。

Answer 2

利用フロート、：

<style> 
.col1{ 
width: 400px; 
height: 100px; 
float: left; 
} 
.col2{ 
width: 400px; 
height: 150px; 
float: left; 
} 
.col3{ 
width: 400px; 
height: 200px; 
float: left; 
} 
</style> 
<div style="width: 1200px;"> 
    <div class="col1">div1</div> 
    <div class="col2">div2</div> 
    <div class="col3">div3</div> 
    <div class="col1">div1</div> 
    <div class="col2">div2</div> 
    <div class="col3">div3</div> 
    <div class="col1">div1</div> 
    <div class="col2">div2</div> 
    <div class="col3">div3</div> 
</div> 

Answer 3

あなたはラッパーのdivにDIV1とDIV2を包むことができ、そしてDIV 3とラッパーのdiv内のdiv 4は、その後、外側のラッパーでこれらの2を包みます。書式設定権を取得するには、いくつかのCSSを使用してください。 HTMLは次のようになります。

.wrap { 
    position: relative; 
    overflow: auto; 
} 
.col { 
    float: left; 
    width: 400px; 
} 

正しいことを行う必要があります。

その後

<div class="wrap"> 
    <div class="col"> 
    <div>div1</div> 
    <div>div2</div> 
    </div> 
    <div class="col"> 
    <div>div3</div> 
    <div>div4</div> 
    </div> 
</div> 

は、このようないくつかのCSSを持っています。

Answer 4

これはテーブルで行います。

私は職場でテーブルを使用し始めていますが、かなり率直です。 CSSでこれらのことを行うことは混乱し、デバッグするのがずっと難しくなります。

Answer 5

div要素は、あなたがそれによって意味何であれ、私たちのコードを表示し、まあ

javascriptを主導しています。あなたのJSによってDIVがどのように構築されているかを見ることができれば、それらを異なる方法で作成する方法を見ることができます。

Answer 6

http://960.gs/などのCSSグリッドにそれらを統合することは可能でしょうか？