如何创建一个布局，其中的元素从左到右浮动从上到下

我在CSS和HTML中编写了一个布局，我希望从左到右呈现预期的布局，像这样从上到下：如何创建一个布局，其中的元素从左到右浮动从上到下

每个盒具有不同的高度，但相同的宽度。我不知道有多少个盒子，它可以从2到20不等。我试过float：left，但是根据盒子的大小，你会得到空的空间。我也尝试过CSS3中的列，但它的行为非常随机，无论是浏览器类型，框的数量还是框的大小。有谁知道一个聪明的技巧，使它看起来像这样，并最好不使用Javascript。

来源

2016-12-02 Numm3n

你有没有在每个元素后面使用'clear：both'来使用'float：left'后元素不会丢失高度？ –

是的，不幸的是，你仍然会在盒子之间获得很多空间。 – Numm3n

请谷歌“砌体布局CSS”或更好的“砌体布局柔性箱”。这将是非常有帮助的。 –

砌体做到这一点：http://masonry.desandro.com/ - 这是用JS虽然

来源

2016-12-02 12:34:26

你可以用纯CSS实现这一目标。使用column-width属性和间距的column-gap组合和padding

HTML

<section> 
    <img src="path" /> 
    <img src="path" /> 
    <img src="path" /> 
</section>

CSS

section{ 
    column-width: 300px; 
    column-gap: 5px; 
    padding: 5px; 
} 

section img{ 
    width: 100%; 
}

演示

Pen

来源

2016-12-02 13:56:44 SvenL

如何创建一个布局，其中的元素从左到右浮动从上到下

回答

相关问题