Javascript 在HTML/CSS中实现列

我有一堆包含文本信息的div。它们都是相同的宽度（可能是400px左右），但高度不同。出于篇幅上的原因，我希望有两到三个专栏（有点像报纸上的招聘广告部分）。请参见下面的ascii艺术：）

div是javascript驱动的，在页面加载时改变高度。我也不应该改变它们的顺序（每个DIV都有一个标题，并且它们是按字母顺序排序的）

到目前为止，我还没有找到一个好办法。HTML流是从左到右，然后从上到下，但我需要从上到下，然后从左到右

我尝试了一个具有两列的表的简单实现，并将div放在一列中，另一半放在另一列中。如果时间看起来合理（当每列中div的平均高度接近时），那么另一半看起来很糟糕

我想如果我是javascript大师，我可以在div扩展后测量它们，将它们相加，然后在运行时将它们从一个表列移动到另一个表列。。。但这超出了我的能力，我不确定这是否可能

有什么建议吗

谢谢

更新：

谢谢你的评论。很明显，我问这个问题做得很差：(

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

基本上，我希望有一种方法可以创建两个专栏，并让内容根据需要从第1栏神奇地流向第2栏（就像Word那样）。我怀疑这是不可能的，但我的HTML/CSS知识非常基础，所以可能…？

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

.col1{
宽度：400px；
高度：100px；
浮动：左；
}
.col2{
宽度：400px；
高度：150像素；
浮动：左；
}
.col3{
宽度：400px；
高度：200px；
浮动：左；
}
第一组
第二组
第三组
第一组
第二组
第三组
第一组
第二组
第三组

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

.col1{
宽度：400px；
高度：100px；
浮动：左；
}
.col2{
宽度：400px；
高度：150像素；
浮动：左；
}
.col3{
宽度：400px；
高度：200px；
浮动：左；
}
第一组
第二组
第三组
第一组
第二组
第三组
第一组
第二组
第三组

您可以将div1和div2包装在包装div中，将div3和div4包装在包装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>

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

---

这样做应该是正确的。

您可以将div1和div2包装在包装div中，将div3和div4包装在包装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>

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

这样做应该是正确的。

对表执行此操作

坦率地说，我开始在工作中使用桌子了？在CSS中执行这些操作是一个混乱的过程，而且调试起来要困难得多。

在表中执行这些操作

坦率地说，我开始在工作中使用桌子了？在CSS中执行这些操作是一个混乱的过程，而且调试起来要困难得多

div是javascript驱动的

不管你是什么意思，给我们看看密码。如果我们可以看到JS是如何构造div的，那么我们可能可以看到如何以不同的方式创建div

div是javascript驱动的

---

不管你是什么意思，给我们看看密码。如果我们可以看到你的JS是如何构造div的，那么我们可能可以看到如何以不同的方式创建div。

草稿满足了你的需要。Firefox似乎支持和Safari/Chrome；我不知道IE8或Opera的情况。

草案符合您的要求。Firefox似乎支持和Safari/Chrome；我不了解IE8或Opera。

是否可以将它们集成到css网格中，例如？

是否可以将它们集成到css网格中，例如？

请小心在css中设置px高度。如果有人有一个更大的字体，然后你期待，坏事情可能会发生。如果有溢出：自动，则可能会出现滚动条；如果有溢出：隐藏，则可能会隐藏某些内容。请小心在css中设置px高度。如果有人有一个更大的字体，然后你期待，坏事情可能会发生。如果有溢出：自动，你可能会看到一个滚动条；如果有溢出：隐藏，你可能会看到一个隐藏的滚动条。。。你在用div/css发明表格？让圣战走远一点。。查看colspan/rowspan。或者发布代码。。。没有代码很难判断你在做什么。所以，如果我理解。。。你在用div/css发明表格？让圣战走远一点。。查看colspan/rowspan。或者发布代码。。。很难说没有代码你在做什么。我一直听到这种“反语义”的说法有几年了。。。但它仍然没有涵盖div所造成的问题：IE6/7的实现（IE8实际上非常好）真的被破坏了，您将花费很多时间来修复这些东西，使它们看起来一样。我开始意识到，当我在表格中创建“布局”时，只需要10分钟，而且“开箱即用”。在CSS中创建这些东西，即使是在FF/Chrom/Opera中，也是一件非常头疼的事情。至少是这样，我一直听到这种“反语义”的说法