css - 多个高度框都在顶部

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

恐怕开发人员想要实现的目标仍然不可能实现。

砖石布局，带有“ float ”框但从左到右阅读是不可能的，即使使用 flexbox

演示: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>