html - 先行放元素，再放列

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

CSS 列旨在垂直显示(与列一样)。

您需要使用 float 或 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>