如何从左侧布局divs（缩略图）以进行包装？

Question

我想在文件管理器中布局DIV图块。没有任何重新排序，从左到右，然后从上到下。根据窗口的宽度自动换行。

如何做到这一点？任何库感激。

砌体可以做到这一点吗？我不需要它去考虑下一个瓷砖的位置！

Answer 1

根据容器的宽度，可以获得更多/更少的列。

.container { 
 
    display: flex; 
 
    justify-content: flex-start; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    width: 250px; 
 
} 
 

 
.item { 
 
    padding: 20px; 
 
}

<div class="container"> 
 
    <div class="item"><img src="http://lorempixel.com/50/50"></div> 
 
    <div class="item"><img src="http://lorempixel.com/50/50"></div> 
 
    <div class="item"><img src="http://lorempixel.com/50/50"></div> 
 
    <div class="item"><img src="http://lorempixel.com/50/50"></div> 
 
    <div class="item"><img src="http://lorempixel.com/50/50"></div> 
 
    <div class="item"><img src="http://lorempixel.com/50/50"></div> 
 
</div>

Answer 2

你可以使用float元素或inline blocks。例如使用

.variant1, .variant2 { 
 
    clear:both; 
 
    display: block; 
 
} 
 
.variant1>div, .variant2>div { 
 
    height: 100px; 
 
    width: 100px; 
 
    margin: 2px; 
 
} 
 
.variant1>div { 
 
    float: left; 
 
    background-color: red; 
 
} 
 
.variant2>div { 
 
    display: inline-block; 
 
    background-color: green; 
 
}

<div class="variant1"> 
 
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> 
 
</div> 
 
<div class="variant2"> 
 
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> 
 
</div>

红色元件是浮动，绿色元件是内联的块。