在 HTML/CSS 中实现列答案

【问题标题】：Implementing columns in HTML/CSS在 HTML/CSS 中实现列
【发布时间】：2010-10-24 22:29:18
【问题描述】：

我有一堆包含文本信息的 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 扩展后测量它们，将它们加起来，然后在运行时将它们从一个表列移动到另一个列......但这超出了我的能力，而且我我不确定这是否可能。

有什么建议吗？

谢谢

更新：

感谢 cmets。很明显我问这个问题做得不好:(

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

基本上，我希望有一种方法可以创建两列，并让内容神奇地根据需要从 column1 流向 column2（就像 Word 一样）。我怀疑这做不到，但我的 HTML/CSS 知识非常基础，所以也许......？

【问题讨论】：

所以，如果我理解……你是在用 divs/css 重新发明表格吗？将 css 圣战走得更远.. 看看 colspan/rowspan。或者贴出代码……很难说没有代码你在做什么。

标签： javascript html css dhtml

【解决方案1】：

草稿CSS3 multi-column model 可以满足您的需求。 Firefox 似乎支持 -moz versions of some of the properties 和 Safari/Chrome -webkit versions；我不知道 IE8 或 Opera。

【讨论】：

【解决方案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;
}

这应该做正确的事。

【讨论】：

【解决方案3】：

使用浮点数，像这样：

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

【讨论】：

在css中设置像素高度时要小心。如果某人的字体比您预期的要大，则可能会发生不好的事情。如果某些内容溢出，您最终可能会出现滚动条：自动，或者如果存在溢出，则某些内容可能会被隐藏：隐藏。

【解决方案4】：

DIV 是 javascript 驱动的

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

【讨论】：

如果 div 是在 JS 中创建的，那么 SEO 已经死了，那么为什么不在表格中这样做，因为语义“借口”在这里无效。好吧，这不是借口，但我找不到更好的词。
这是一个减少 JS 驱动方面的论点，而不是使用反语义标记。犯一个“错误”是改正的理由，而不是犯第二个“错误”的借口。 - 使用“错误”是因为我想不出更正确的词。

【解决方案5】：

是否可以将它们集成到 css-grid 中，例如 http://960.gs/ ？

【讨论】：

【解决方案6】：

用表格来做这件事。

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

【讨论】：

我几年来一直听到这个“反语义”的东西......但它仍然没有涵盖div创建的问题：IE6/7的实现（IE8实际上非常好）真的坏了，你会花很多时间修理东西，所以它们看起来一样。我开始看到，当我在表格中创建我的“布局”时，它只需要 10 分钟，而且它“开箱即用”。即使在 FF/Chrom/Opera 中用 CSS 创建这些东西也是一件非常头疼的事情。至少恕我直言。