Question

我知道使用css 2是不可能的，但现在使用Flexbox ......

图片上的这个技巧只能用CSS实现吗？

http://img11.hostingpics.net/pics/430383flexbox.jpg http://img11.hostingpics.net/pics/430383flexbox.jpg

HTML ：

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Answer 1

我认为开发人员想要实现的目标仍然不可能，我担心。

砌体布局，带有“浮动”框，但从左到右阅读是不可能的，即使使用flexbox

DEMO ：http://jsfiddle.net/g8Ky9/

在示例中，您可以看到您拥有的替代品;第三个看起来很有希望，但是盒子顺序可能不是你想要的（从上到下而不是从左到右）

确保您可以使用css-flexbox的属性order轻松切换框，但是您需要使用javascript，并且计算正确的偏移量并不容易

这是很可悲的说承认，但这个目标是不可能用CSS3实现甚至

.container
    {padding:10px;border:1px red solid;width:960px;display:flex;flex-wrap:wrap;flex-direction:row;align-items:flex-start;}

.container > div
    {padding:10px;width:200px;margin:10px;background:red;font-size:20px;text-align:center;font-weight:bold;font-family:sans-serif;}

.container.t1
    {align-items:stretch;}

.container.t2
    {flex-direction:column;height:180px;}

.container > div:nth-child(1){min-height:20px}
.container > div:nth-child(2){min-height:40px}
.container > div:nth-child(3){min-height:60px}
.container > div:nth-child(4){min-height:40px}
.container > div:nth-child(5){min-height:20px}
.container > div:nth-child(6){min-height:60px}
.container > div:nth-child(7){min-height:40px}
.container > div:nth-child(8){min-height:20px}


that's the base:
<div class="container">
    <div>1</div><div>2</div><div>3</div><div>4</div>
    <div>5</div><div>6</div><div>7</div><div>8</div>
</div>

you can fill the empty space:
<div class="container t1">
    <div>1</div><div>2</div><div>3</div><div>4</div>
    <div>5</div><div>6</div><div>7</div><div>8</div>
</div>

or do the masonry layout like this, but with order of boxes wrong:
<div class="container t2">
    <div>1</div><div>2</div><div>3</div><div>4</div>
    <div>5</div><div>6</div><div>7</div><div>8</div>
</div>

Answer 2

我在我的网站上使用此tehnique来显示一些帖子。这将改变你的代码，但我知道这有效。我在每个帖子的有序列表（如容器）和列出的项目（li）中显示所有帖子。

CSS：

#container  {
clear:both;
-moz-column-count:3;
-moz-column-gap:20px;
-webkit-column-count:3;
-webkit-column-gap:20px;
width:70%;
position:relative;
margin:20px auto }

#post {
width:100%;
display:inline-block;
list-style:none;
margin-bottom:40px }

HTML

<ol id="container">
 <li id="post">..</li>
 <li id="post">..</li>
 <li id="post">..</li>
 <li id="post">..</li>
 ...
</ol>

例如，从我的网站访问this page。对不起我的英语不好。如果您有任何疑问，请问我。

顶部有多个高度盒子

2 个答案: