多个高度框都在顶部答案

【问题标题】：Multiple height box all on top多个高度框都在顶部
【发布时间】：2014-01-14 06:28:48
【问题描述】：

我知道这在 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>

【问题讨论】：

为什么不用css3？并使用 javascript 后备？
我的面板需要最新的浏览器，我想最小化 JS。这就是为什么我想在可能的情况下只使用 CSS。
最新的浏览器？那你可以用css3，还是我弄错了？
是的，实际上我只想使用 CSS3

标签： css grid flexbox

【解决方案1】：

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

砌体布局，带有“浮动”框，但从左到右阅读是不可能的，即使使用 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>

【讨论】：

【解决方案2】：

我在我的网站上使用这种技术来显示一些帖子。这将极大地改变您的代码，但我知道这是可行的。我将所有帖子显示在有序列表（如容器）中，并为每个帖子列出项目 (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。对不起我的英语不好。有什么问题可以问我。

【讨论】：

我知道这种技术，但我的盒子有一些效果（如 box-shadow）和 column-count 切割列和效果：jsfiddle.net/jerjako/6tYG9