html – CSS显示内联块：删除空格

2023年12月2日 190次阅读

参见英文答案 > How to Create Grid/Tile View?                                    8个

我有一个容器,有很多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.

我不知道该怎么做.

最佳答案 虽然有一个名为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?

点赞