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

Question

我正在尝试将divs 组织成两列,但不强制它们成行.我也试图保持divsa 之间的垂直间距不变.

您可以看到以下演示,如果每列中的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的小提琴

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

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

你最接近的是网格布局 - 我们将在最后得到它.Spoiler:它真的很酷,但在浏览器支持非常好之前还需要一段时间.

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

如果选择JS路径,可以使用Grid Layout JS polyfill!这样,您可以在今天编写网格布局语法,并在将来某个时候删除不再需要的polyfill.

具有多列的柱状布局

从其他答案和评论来看,柱状包装布局并不是您想要的.如果您仍然决定走这条路线,您可以使用多列布局.支持非常好:除了IE <10之外的所有东西,差不多.

一个简单的例子,以防你想要改变你的布局以进入multicol方向:这是一个带有2列multicol布局的JSBin.请注意,您不需要同时设置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包装flexbox示例.

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

最后,我们进入网格布局.这个新规范有一些很酷的功能,让我们可以做一些接近 "砌体"布局的东西.

抬头:您需要在Chrome Canary,WebKit Nightly或Firefox Developer版本中查看这些示例.这里是一个古老的实施网格布局在IE10 +(和边缘也一样),但它不包含所有我们需要新的辣味属性.

首先是标记:我们将使用一个包装元素+ .module里面的项目(包装器不是绝对必要的 - 我们可以直接放入模块body,但我发现这样更清晰):

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

接下来,我们告诉容器是一个网格容器:

.container {
  display: grid;
}

然后我们将它设置为具有2个相等宽度列(1"小数单位")的列的"模板",以及列之间的间隙以及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;
}

最后,我们需要告诉网格使用"密集"算法,这意味着它将为每个项目进行一次放置,试图避免在自动放置中形成"漏洞".

.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;
}

这给了我们一些非常接近"砌体"布局的东西,正如在这个密集网格布局的JSBin示例中可以看到的那样- 再次注意,您将需要夜间/开发版本的Chrome/WebKit或Firefox来查看它是如何工作的.

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

有些事情需要注意:

• 该row dense包装算法并没有真正有所作为这里,作为项目发生在叶无孔的图案叠起来,但我把它放在那里的完整性.
• 正如你所看到的,最后一行上有一个单独的项目 - 网格不能神奇地调整大小(例如jQuery Masonry插件),它只能根据网格位置或跨度来调整大小.它不是盒装算法布局的银弹.也就是说,一旦你掌握它,它就会非常强大和有趣.在一年左右的时间内(最多,我的猜测),它将出现在所有主要(常青树)浏览器中.

Answer 3

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

超文本标记语言

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

演示： http: //jsfiddle.net/89mW6/5/