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

I'm trying to organize divs into two columns, but not force them into rows. I'm also trying to keep the vertical spacing between the divs a constant.

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

You can see the following demo, which would be correct if there wasn't huge amounts of vertical whitespace between the divs in each column.

您可以看到以下演示,如果每列中的div之间没有大量的垂直空白,这将是正确的。

html

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

I thought that I could just float them to the left with a static width, but apparently that didn't work.

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

Any ideas?

6 个解决方案

#1

Thanks to J.Albert Bowden for the fiddle

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

#2

First things first: you won’t be able to acheive a columnar wrapping layout with floats: as other commenters have pointed out, that’s just not how floats work. Nor is there an "automatic masonry-layout" module in CSS, which I suspect is what you’re really after. I also assume that placing each item individually is out of the question.

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

The closest thing you’ll get is Grid Layout—we’ll get to that towards the end. Spoiler: it’s really cool, but it’ll be a little while before browser support is really good.

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

So, TL;DR: there is no cross-browser method for doing a smart, row-by-row, masonry-like layout in CSS. But Grid Layout comes damn near. If you can't wait, use JS or switch the design to something that works with wrapping columns, for example.

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

If you choose the JS route, you could use the Grid Layout JS polyfill! That way, you can write grid layout syntax today, and remove the polyfill when it’s no longer needed, at some point in the future.

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

---

Columnar layout with multi-col

Judging from other answers and comments, a columnar wrapping layout is not what you want though. Just in case you still decide to go that route, you can do it with Multi Column layout. Support is pretty good: everything except IE<10, pretty much.

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

A quick example, just in case you want to change your layout to go in the multicol direction: here’s a JSBin with 2-column multicol layout. Note that you do not need to set both column-count and column-width: set a column-count (and column-gap) and the rest will sort itself out.

一个简单的例子,以防你想要改变你的布局以进入multicol方向:这是一个带有2列多元素布局的JSBin。请注意,您不需要同时设置列数和列宽:设置列数(和列间距),其余的将自行排序。

Oh, and if you get buggy rendering with margins (e.g. margins wrapping onto new columns, creating uneven layouts), the usual fix is to set display: inline-block; width: 100%; on the .module. Your milage may vary: for something that’s been around a long time, multicol sure is buggy.

哦,如果你使用边距进行错误渲染(例如边距包装到新列上,创建不均匀的布局),通常的解决方法是设置display:inline-block;宽度:100%;在.module上。你的milage可能会有所不同:对于长期存在的事情,多元肯定是错误的。

Columnar layout with flexbox

Sticking with columnar layout for just a little bit longer, you can also use flexbox. (I see one other answer bringing up Flexbox, but sadly a completely outdated syntax which will not work in modern browsers).

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

The difference between wrapping into columns in multi-col vs flexbox is that flexbox does not balance the items into columns for you (it’s not really made for that type of layout), so you need to set a specific height in order to force the columns to wrap. If you have a container element (.container) and the .module items inside it, the following is the basic approach:

在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 */
}

...not counting prefixes and syntax variations for IE10, which uses a slightly older variation of the spec. (There’s also the old-old flexbox, which doesn’t support flex wrapping, so we’ll forget about that). Simple JSBin wrapping flexbox example here.

...不计算IE10的前缀和语法变体,IE10使用稍微较旧的规范变体。 (还有旧的flexbox,它不支持flex包装,所以我们会忘记这一点)。这里简单的JSBin包装flexbox示例。

Dense packing with Grid Layout auto placement

Finally, we get to Grid Layout. This new spec has some really cool features, that allow us to do something close to a "Masonry" layout.

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

Heads up: you need to check these examples in Chrome Canary, WebKit Nightly or Firefox Developer edition. There is an old implementation of Grid Layout in IE10+ (and Edge as well), but it doesn’t contain all the new hotness properties we need.

抬头:您需要在Chrome Canary,WebKit Nightly或Firefox Developer版本中查看这些示例。在IE10 +(以及Edge)中有一个旧的Grid Layout实现,但它不包含我们需要的所有新的hotness属性。

First the markup: we’ll use a wrapper element + the .module items inside (the wrapper is not strictly necessary—we could have put the modules directly into body, but I just find it clearer this way):

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

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

Next, we tell the container to be a grid container:

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

.container {
  display: grid;
}

Then we set it to have a "template" for columns of 2 equal width columns (1 "fractional unit"), and gaps between columns as well as rows of 20px:

然后我们将它设置为具有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; */
}

We have not yet given it a template for rows, but we only need to allow it to automatically create them as needed. For this, we set the grid-auto-rows property, to add as many 50px tall rows as needed:

我们还没有为行提供模板,但我们只需要允许它根据需要自动创建它们。为此,我们设置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;
}

At this point, we have not placed any items inside the container yet, at least not explicitly. With grid, you can specify exactly which area of the grid an item shoud belong in. The thing is, you don’t have to! The grid will place them automatically in the first available slot, starting at the top left and going row by row by default, unless you tell it otherwise.

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

Instead, we need to tell it that some items are bigger than others. We don’t use sizes for this, but instead tell odd items to span 2 rows, and every 3rd item to span 4 rows.

相反,我们需要告诉它一些项目比其他项目更大。我们不使用大小,而是告诉奇数项目跨越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;
}

Finally, we need to tell the grid to use the "dense" algorithm, meaning it will make one placement pass per item, trying to avoid making "holes" in the auto placement.

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

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

This gives us something very close to a "masonry" layout, as can be seen in this JSBin example of a dense grid layout — Again, note that you will need nightly/dev versions of Chrome/WebKit or Firefox to see how it works.

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

Here’s an image of the result, as viewed in Chrome Canary:

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

Some things to note:

有些事情需要注意:

• The row dense packing algorithm doesn’t really make a difference here, as the items happen to stack up in a pattern that leaves no holes, but I put it in there for completeness.

行密集打算算法在这里并没有真正有所作为,因为项目碰巧堆叠在一个没有留下任何漏洞的模式中,但我把它放在那里是为了完整性。

• As you can see, there’s a lone item on the last row—grid can’t magically resize things (like a jQuery Masonry plugin, for example), it can only size according to grid positions or spans. It's not a silver bullet for box-packing algorithmic layout. That said, it’s incredibly powerful and fun once you master it. Within a year or so (at the max, my guess), it’ll be in all major (evergreen) browsers.

正如你所看到的,最后一行上有一个单独的项目 - 网格不能神奇地调整大小(例如jQuery Masonry插件),它只能根据网格位置或跨度来调整大小。它不是盒装算法布局的银弹。也就是说,一旦掌握它,它就会非常强大和有趣。在一年左右的时间内(最多,我的猜测),它将出现在所有主要(常青树)浏览器中。

#3

Try this.. http://jsfiddle.net/rymfev8c/1/

试试这个.. 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;
}

omg its 3 years old..

omg其3岁..

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

This is box-flex, introduced in css3. you may have to use also -webkit-/ -moz- property, before "display", "box orient" and so on, it depends on the browser

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

#5

You can use table tag. Try something like this

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

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/

#6

I don't think this is a good practice but what i usually do in cases like this is building 2 div, set them side by side and just fill them up with whatever content you desire, but again, this is the way i do it, it might or might not work for you :)

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