的HTML

Question

我正在尝试将div组织成两列，但不要将它们强制成行。我也试图保持div之间的垂直间距不变。

You can see the following demo，如果每列中的div之间没有大量的垂直空白，这将是正确的。

的HTML

<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>

我以为我可以用静态宽度将它们漂浮到左侧，但显然这不起作用。

有什么想法吗？

Answer 1

感谢 J.Albert Bowden 的 fiddle

<强> HTML

<div id="box">
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
</div>

<强> CSS

#box{
    -moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;
}
.module{
    margin-bottom: 20px;
}

Answer 2

首先要做的事情是：你将无法使用浮点数实现柱状包装布局：正如其他评论者指出的那样，这不是浮点数的工作方式。也没有＆＃34;自动砌体布局＆＃34; CSS中的模块，我怀疑是你真正想要的。我还假设单独放置每个项目是不可能的。

你最接近的是网格布局 - 我们将在最后得到它。 Spoiler：这真的很酷，但在浏览器支持真的很好之前还有一段时间。

所以，TL; DR：没有跨浏览器方法在CSS中进行智能，逐行，类似砖石的布局。但是网格布局很可靠。例如，如果您不能等待，请使用JS或将设计切换为适用于包装列的设计。

如果您选择JS路线，则可以使用Grid Layout JS polyfill！这样，您可以立即编写网格布局语法，并在将来某个时候删除不再需要的polyfill。

具有多列

的列式布局

从其他答案和评论来看，柱状包装布局并不是您想要的。如果你仍然决定走那条路，你可以用Multi Column layout来做。支持非常好：除IE之外的所有内容<10，非常多。

一个简单的示例，以防您想要更改布局以进入multicol方向：这是JSBin with 2-column multicol布局。请注意，您无需同时设置column-count和column-width：设置column-count（和column-gap），其余的将自行排序。

哦，如果您使用边距进行错误渲染（例如，边距换行到新列，创建不均匀的布局），通常的解决方法是在display: inline-block; width: 100%;上设置.module。你的milage可能会有所不同：对于长时间存在的事情，多元肯定是错误的。

使用flexbox的列式布局

坚持使用柱状布局更长一点，您也可以使用flexbox。（我看到另外一个提出Flexbox的答案，但遗憾的是一个完全过时的语法在现代浏览器中无效）。

在multi-col和flexbox中包装到列之间的区别在于flexbox不会为你平衡项目（它不是真正针对那种类型的布局），所以你需要设置一个特定的高度以便强制列包裹。如果您有一个容器元素（.container）和其中的.module项，则以下是基本方法：

.container {
  display: flex;
  flex-flow: column wrap;
  height: 1000px; /* or whatever works for you */
}
.module {
  /* whatever props you want for modules */
}

...不计算IE10的前缀和语法变体，IE10使用稍微较旧的规范变体。（还有旧的flexbox，它不支持flex包装，所以我们会忘记这一点）。简单JSBin wrapping flexbox example here。

使用网格布局自动放置的密集打包

最后，我们进入网格布局。这个新规范有一些非常酷的功能，允许我们做一些关闭到一个＆＃34;砌体＆＃34;布局。

抬头：您需要在Chrome Canary，WebKit Nightly或Firefox Developer Edition中查看这些示例。是IE10 +（以及Edge）中网格布局的旧实现，但它不包含我们需要的所有新的热度属性。

首先是标记：我们将在内部使用包装元素+ .module项（包装器不是必需的 - 我们可以将模块直接放入body，但我只是找到它这样更清楚）：

<div class="container">
  <div class="module"></div>
  <div class="module"></div>
  <!-- and so on -->
</div>

接下来，我们告诉容器是一个网格容器：

.container {
  display: grid;
}

然后我们将其设置为＆＃34;模板＆＃34;对于2个相等宽度列的列（1＆＃34;小数单位＆＃34;），列之间的间隙以及20px的行：

.container {
  display: grid;

  /* 2 columns, equally wide: */
  grid-template-columns: 1fr 1fr;

  /* gaps between each column and row. */
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  /* ...can also be shortened to grid-gap: 20px; */
}

我们还没有为行提供模板，但我们只需要允许它根据需要自动创建它们。为此，我们设置grid-auto-rows属性，根据需要添加尽可能多的50px个高行：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;

  /* automatically create rows, 50px tall each: */
  grid-auto-rows: 50px;
}

此时，我们还没有在容器中放置任何物品，至少没有明确说明。使用网格，您可以准确指定网格所属的网格区域。事情是，您不必！网格会自动将它们放在第一个可用的插槽中，默认情况下从左上角开始逐行，除非你另有说明。

相反，我们需要告诉它一些项目比其他项目更大。我们不使用大小，而是告诉奇数项目跨越2行，每3个项目跨越4行。

.module {
  background: yellow;
}

.module:nth-child(odd) {
  grid-row: span 2;
  background: green;
}
.module:nth-child(3n) {
  grid-row: span 4;
  background: orange;
}

最后，我们需要告诉网格使用＆＃34;密集＆＃34;算法，这意味着它将为每个项目进行一次放置，试图避免制作＆＃34; hole＆＃34;在自动展示位置。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-auto-rows: 50px;

  /* use the "dense" algorithm: */
  grid-auto-flow: row dense;
}

这给了我们一些非常接近砖石的东西＆＃34;布局，如JSBin example of a dense grid layout中所示 - 请注意，您需要使用Chrome / WebKit或Firefox的nightly / dev版本来查看其工作原理。

以下是Chrome Canary中显示的结果图片：

有些注意事项：

row dense打包算法在这里并没有什么区别，因为这些项目恰好堆叠成一个没有留下空洞的模式，但我把它放在那里是为了完整。
正如你所看到的，最后一行上有一个单独的项目 - 网格不能神奇地调整大小（例如jQuery Masonry插件），它只能根据网格位置或跨度来调整大小。它不是盒装算法布局的银弹。也就是说，一旦你掌握它，它就会非常强大和有趣。在一年左右的时间内（最多，我的猜测），它将出现在所有主要（常青树）浏览器中。

Answer 3

试试这个.. http://jsfiddle.net/rymfev8c/1/

HTML

<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>

CSS

body {
  padding: 40px;
}

.module {
  height: 50px;
  width: 45%;
  margin-right: 3%;
 margin-bottom: 60px;
  background: yellow;
  float: left;
}

.module:nth-child(odd) {
  height: 100px;
  background: green;
 margin-bottom: 5px;
}
.module:nth-child(3n) {
  height: 200px;
  background: orange;
  margin-bottom: 5px;
}

告诉它3岁......

Answer 4

HTML

<div id = "box">
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
</div>

CSS：

#box{
display:box;
box-orient: vertical;
-webkit-display:box; 
-webkit-box-orient: vertical;
}

.module{
box-flex: 1;
-webkit-box-flex: 1;
}

这是box-flex，在css3中引入。您可能还必须使用-webkit- / -moz-属性，在“显示”，“盒子方向”等之前，它取决于浏览器

Answer 5

您可以使用table标记。试试这样的事情

<强> HTML

<table cellpadding="0" cellspacing="0" width="100%" height="100%">  
  <tr>     
    <td>      
      <div class="module"></div>
      <div class="module"></div>
      <div class="module"></div>
      <div class="module"></div>
      <div class="module"></div>
      <div class="module"></div>
    </td>
    <td>
      <div class="module"></div>
      <div class="module"></div>
      <div class="module"></div>
      <div class="module"></div>
      <div class="module"></div>
      <div class="module"></div>           
    </td>    
  </tr>  
</table>

<强> CSS

body {
  padding: 40px;
}

.module {
  height: 50px;
  width: 45%;
  margin-right: 3%;
  margin-bottom: 20px;
  background: yellow;
}

DEMO： http://jsfiddle.net/89mW6/5/

Answer 6

我不认为这是一个很好的做法，但我通常在这样的情况下做的是构建2 div，将它们并排放置并填充你想要的任何内容，但同样，这就是我这样做的方式，它可能会或可能不适合你：）

CSS：在多行上浮动多个具有不同高度的元素？

的HTML

6 个答案:

具有多列

使用flexbox的列式布局

使用网格布局自动放置的密集打包