Question

我有一个容器，里面有很多div显示内联块。但是当其中一个div比其他div高时，同一行中的所有div在顶部都有一些空白。

    .all {
        text-align: center;
    }
    .a {
        width: 200px;
        height: 200px;
        background: red;
        margin: 20px;
        display: inline-block;
    }
    .b {
        height: 100px;
    }

The problem

This is what I'm trying to achieve.

我不知道该怎么做。

Answer 1

虽然有一个名为Packery的简洁Javascript库可以完全满足您的需求，但是不可能完全按照您在HTML / CSS中所描绘的那样，同时提供任何灵活性或易于再现，而

http://packery.metafizzy.co/

编辑：

以下是使用Packery之后的一个工作示例，使用较新的版本，您实际上不需要编写任何Javascript，这使得条目的条目更低。

http://jsfiddle.net/s9crmo9d/8/

<div id="container" class="js-packery"
  data-packery-options='{ "itemSelector": ".item", "gutter": 10 }'>

    <div class="item red small"></div>
    <div class="item green large"></div>
    <div class="item orange small"></div>
    <div class="item red large"></div>
    <div class="item green large"></div>
    <div class="item orange large"></div>
    <div class="item red large"></div>
    <div class="item green large"></div>
    <div class="item orange small"></div>

</div>

虽然他没有特别要求基于CSS的砌体布局，但这可能被视为重复。

Is it possible to use flexbox/CSS to create a masonry layout?

Answer 2

如果我是你，我会尝试以不同的方式做到这一点。尝试将你的想法看作4列（div）与＆＃34; display-inline：block＆＃34;属于each。然后在你的div里面放置其他具有属性的div你希望。我只看到纯CSS的解决方案，没有额外的插件或框架。不要忘记添加＆＃34; margin-bottom＆＃34;属于你的每个＆＃34;块＆＃34;在栏目内。

Answer 3

您已经为容器2设置了高于容器1的高度，尝试使用它：

.all {
        text-align: center;
    }
    .a {
        width: 200px;
        min-height: 100px;
        background: red;
        margin: 20px;
        display: inline-block;
    }
    .b {
        height: 100px;
    }

CSS显示内联块：删除空格

3 个答案: