先行放元素，再放列

Question

我正在尝试将一些 html 元素（图像）放入列中，根据分辨率，它可以是 1、2、3 或 4 列。例如，如果我有 11 张图像，我想以这种方式放置它们（在本例中为 3 列）：

1    2    3
4    5    6
7    8    9
10   11

我有一个代码可以根据屏幕的分辨率创建列，但它会像这样放置列：

1    5    9   
2    6    10
3    7    11
4    8

你能帮帮我吗？

#pics {
  line-height: 1;
  -webkit-column-count: 4;
  -webkit-column-gap:   10px;
  -moz-column-count:    4;
  -moz-column-gap:      10px;
  column-count:         4;
  column-gap:           10px;
}
#pics img {
  width: 100% !important;
  height: auto !important;
}
@media (max-width: 800px) {
  #pics {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 500px) {
  #pics {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 300px) {
  #pics {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

<section id="pics">
   <img src="http://placehold.it/240x240?text=01" alt="01" width="240">
   <img src="http://placehold.it/240x240?text=02" alt="02" width="240">
   <img src="http://placehold.it/240x240?text=03" alt="03" width="240">
   <img src="http://placehold.it/240x240?text=04" alt="04" width="240">
   <img src="http://placehold.it/240x240?text=05" alt="05" width="240">
   <img src="http://placehold.it/240x240?text=06" alt="06" width="240">
   <img src="http://placehold.it/240x240?text=07" alt="07" width="240">
   <img src="http://placehold.it/240x240?text=08" alt="08" width="240">
   <img src="http://placehold.it/240x240?text=09" alt="09" width="240">
   <img src="http://placehold.it/240x240?text=10" alt="10" width="240">
   <img src="http://placehold.it/240x240?text=11" alt="11" width="240">
</section>

Answer 1

.wrapper {
column-count:3;
}
.col {
  width:33%;
  height:50px;
}

<div class="wrapper">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
  <div class="col">6</div>
  <div class="col">7</div>
  <div class="col">8</div>
  <div class="col">9</div>
</div>

Answer 2

通读this answer。它也是响应式的

您将要进行砖石布局。

另一种快速选择是 Twitter bootstrap。

我认为你最好选择上述任一解决方案，尽量避免与 setting/aligning divs & ...

纠缠

Answer 3

CSS 列用于 垂直显示（按列显示）。

您需要使用浮动或 flexbox。

在此处阅读更多内容：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

*,
*::before,
*::after {
  box-sizing: border-box;
}

#pics {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  -webkit-justify-content: flex-start; /* Safari */
  justify-content:   flex-start;
}
#pics div {
  width: 100%; 
  padding: 5px;
}

#pics div img{
  width: 100%; 
  height: auto; 
}


@media (min-width: 250px) {
  #pics div { width: 49%; }
}

@media (min-width: 500px) {
  #pics div { width: 32%; }
}

<section id="pics">
    <div><img src="http://placehold.it/240x240?text=01" alt="01" width="240"></div>
    <div><img src="http://placehold.it/240x240?text=02" alt="02" width="240"></div>
    <div><img src="http://placehold.it/240x240?text=03" alt="03" width="240"></div>
    <div><img src="http://placehold.it/240x240?text=04" alt="04" width="240"></div>
    <div><img src="http://placehold.it/240x240?text=05" alt="05" width="240"></div>
    <div><img src="http://placehold.it/240x240?text=06" alt="06" width="240"></div>
    <div><img src="http://placehold.it/240x240?text=07" alt="07" width="240"></div>
    <div><img src="http://placehold.it/240x240?text=08" alt="08" width="240"></div>
    <div><img src="http://placehold.it/240x240?text=09" alt="09" width="240"></div>
    <div><img src="http://placehold.it/240x240?text=10" alt="10" width="240"></div>
    <div><img src="http://placehold.it/240x240?text=11" alt="11" width="240"></div>
</section>

先行放元素，再放列

Put elements in rows first, then columns

html

css

css-multicolumn-layout