0

我有一堆包含文本信息的 DIV。它们都是相同的宽度(可能是 400 像素左右),但高度不同。出于空间原因,我希望有两到三列这些 DIV(有点像报纸上的广告部分)。请参阅下面有吸引力的 ascii-art :)

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

DIV 是 javascript 驱动的,并在页面加载时更改高度。我也不应该更改它们的顺序(每个 DIV 都有一个标题,它们按字母顺序排序)。

到目前为止,我还没有找到一个好的方法来做到这一点。HTML 流程是从左到右,然后从上到下,但我需要从上到下,然后从左到右。

我尝试了一个包含两列的表的简单实现,并将 DIV 放在一列中,另一半放在另一列中。有时间看起来很合理(当每列中 DIV 的平均高度接近时),另一半看起来很糟糕。

我想如果我是 javascript 大师,我可以在 DIV 扩展后测量它们,将它们加起来,然后在运行时将它们从一个表列移动到另一个......但这超出了我的能力,我不确定无论如何都是可能的。

有什么建议么?

谢谢

更新:

感谢您的评论。很明显我问这个问题做得不好:(

DIV 只是包含/分组相似内容的一种方式——并没有真正将它们用于布局本身。它们的宽度相同,但高度不同。我想把它们吐在一个页面上,神奇地:) 将它们排列成两列,两列的高度几乎相同 - 就像报纸专栏一样。我不知道开始时 DIV 有多高,所以我不知道将每个 DIV 放在哪一列(这意味着如果我知道它们的高度,我会将它们分成两个表格单元格,但我不知道不知道)。所以上面的例子只是一个简单的例子——它可能在运行时证明 DIV 1 大于其他 3 的组合(在这种情况下 DIV2 应该浮动到 column2 的顶部),或者 DIV 4 可能是大的(在这种情况下,DIV 1、2 和 3 都在 column1 中,而 DIV4 可以单独在 column2 中)

基本上,我希望有一种方法可以创建两列,并根据需要让内容从 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 中,将 div 3 和 div 4 包装在一个包装 div 中,然后将这两个包装在一个外包装中。使用一些 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

使用浮点数,如下所示:

<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

DIV 是 javascript 驱动的

好吧,不管你是什么意思,向我们展示代码。如果我们可以看到您的 JS 是如何构建 DIV 的,我们可能会看到如何以不同的方式创建它们。

于 2009-05-09T05:40:43.337 回答
0

是否可以将它们集成到诸如http://960.gs/之类的 css-grid 中?

于 2009-05-09T14:19:46.297 回答
-1

用表格来做这件事。

我开始在工作中使用桌子,坦率地说?在 CSS 中做这些事情是一团糟,而且更难调试。

于 2009-05-08T23:33:57.823 回答