DIV在两个方向上的紧凑布置

问题描述

这是很容易安排DIV水平与浮动。例如：

It is easy to arrange DIVs horizontally with float. For example:

<div style="width: 500px;">
 <div style="float:left; width: 200px; height: 100px; background-color:Yellow;"></div>
 <div style="float:left; width: 150px; height: 60px; background-color:Blue;"></div>
 <div style="float:left; width: 140px; height: 240px; background-color:Green;"></div>
 <div style="float:left; width: 180px; height: 200px; background-color:Red;"></div>
 <div style="float:left; width: 130px; height: 160px; background-color:Purple;"></div>
</div>

这将产生：

This will produce:

但是如何水平和垂直排列DIV？在这种情况下，如何将红色和紫色DIV上方的空白区域（黄色和蓝色DIV下）移位？

But how to arrange the DIVs both horizontally and vertically? In this case, how to shift the Red and Purple DIVs upper where there is empty space (under Yellow and Blue DIVs)?

注意这只是一个例子，我想找到一个方法来为任何一组DIV（不仅是这个典型的例子）安排。

NOTE: This is just an example, and I wish to find a method to make the arrangement for any set of DIVs (not only this typical example).

推荐答案

假设你使用一组动态的任意大小的对象，没有纯CSS方法来实现这一点。如果满足以下条件，可以使用CSS3多列布局来关闭：

Assuming you are working with a dynamic set of arbitrarily sized objects, there is no pure CSS method to achieve this. You can get close by using a CSS3 multi-column layout if:

1. 您只需支持现代浏览器。


2. 所有对象可以排列成等高组。

这里，对象按照300px高度的组排列。

Here, objects are arranged in groups of 300px height.

<div id="blocks">
  <div style="height: 100px; background-color: yellow;"></div>
  <div style="height: 200px; background-color: blue;"></div>
  <div style="height: 300px; background-color: green;"></div>
  <div style="height: 200px; background-color: red;"></div>
  <div style="height: 160px; background-color: purple;"></div>
</div>

#blocks {
  -moz-column-count: 3;
  -moz-column-gap: 0;
  -webkit-column-count: 3;
  -webkit-column-gap: 0;
  column-count: 3;
  column-gap: 0;
  width: 450px;
}
#blocks div {
  width: 150px;
}

这篇关于DIV在两个方向上的紧凑布置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！