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 回答