如何使用包装将div（缩略图）从左边排列到rigt？

Question

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

怎么做？任何图书馆都赞赏。

砌体可以这样做吗？我不需要它来考虑适合下一个瓷砖的位置！

Answer 1

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

＆＃13;

＆＃13;

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

.item {
  padding: 20px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

红色元素是浮点数，绿色元素是内联块。