0

テキスト情報を含む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つの列を持つテーブルの単純な実装を試しましたが、一方の列にDIVがあり、もう一方の列に残りの半分があります。妥当に見える時間をとってください（各列のDIVの平均の高さが近くなると）、残りの半分はひどいように見えます。

私がjavascriptの第一人者であれば、DIVを拡張した後で測定し、合計して、実行時に1つのテーブル列から別のテーブル列に移動できると思います...しかし、それは私の能力を超えており、よくわかりません。とにかく可能です。

助言がありますか？

ありがとう

アップデート：

コメントありがとうございます。私が質問をするという貧弱な仕事をしたことは明らかです:(

DIVは、類似したコンテンツを含む/グループ化するための単なる方法であり、実際にはレイアウト自体に使用するものではありません。それらはすべて同じ幅ですが、高さが異なります。ページに吐き出したいだけで魔法のように:)それらを2つの列に配置します。ここで、2つの列の高さは、新聞の列のようにほぼ同じです。開始時にDIVの高さがわからないため、各DIVを配置する列がわかりません（つまり、高さがわかっている場合は、2つのテーブルセルに分割しますが、わかりません。知っている）。したがって、上記の例は単純な例です。実行時に、DIV 1が他の3つを組み合わせたものよりも大きいことが判明する場合があります（この場合、DIV2はcolumn2の先頭にフロートする必要があります）。大きなもの（この場合、DIV 1、2、および3はすべてcolumn1にあり、DIV4はcolumn2に単独である可能性があります）

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

4

6 に答える 6

3

ドラフトCSS3マルチカラムモデルはあなたが望むことをします。Firefoxは、一部のプロパティの-mozバージョンとSafari /Chrome -webkitバージョンをサポートしているようです。IE8やOperaについては知りません。

于 2009-05-09T14:16:07.873 に答える
2

div1とdiv2をラッパーdivでラップし、div3とdiv4をラッパーdivでラップしてから、これら2つを外部ラッパーでラップすることができます。いくつかのcssを使用してフォーマットを正しく取得すれば、うまくいくはずです。htmlは次のようになります。

<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をいくつか用意します。

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

それは正しいことをするはずです。

于 2009-05-08T23:03:59.283 に答える
0

次のようにfloatを使用します。

<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>
于 2009-05-08T23:03:08.380 に答える
0

それらをhttp://960.gs/などのcss-gridに統合することは可能でしょうか？

于 2009-05-09T14:19:46.297 に答える
0

DIV は JavaScript 駆動型です

それが何を意味するにせよ、コードを示してください。JS によって DIV がどのように構築されているかがわかれば、おそらく別の方法で DIV を作成する方法がわかります。

于 2009-05-09T05:40:43.337 に答える
-1

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

仕事でテーブルを使い始めたのですが、率直に言って? これらのことを CSS で行うのは面倒で、デバッグがはるかに困難です。

于 2009-05-08T23:33:57.823 に答える