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

eval

strings = c("85",  "60+19",  "98",  NA,  "119",  "105",  NA,  "60+30")
sapply(parse(text=strings), eval)
[1]  85  79  98  NA 119 105  NA  90

Answer 2

CSS列旨在显示（如列所示）垂直。

您需要使用浮动或弹性框。

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

＆＃13;

*,
*::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%; }
}

＆＃13;

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

＆＃13;

Answer 3

全面阅读this answer。它也是响应

你将进行砖石布局。

另一个快速替代方案是使用Twitter bootstrap。

我认为你最好采用上述任何一种解决方案，尽量避免设置/调整divs＆amp; ...

首先将元素放在列中，然后放入行

3 个答案: