css - 使用 webkit-column-count 不显示两列

Question

我正在尝试使用 CSS 在两列布局中显示多个图像。

.photos-two-column {
  /* Prevent vertical gaps */
  line-height: 0;
  -webkit-column-count: 2;
  -webkit-column-gap: 0px;
  -moz-column-count: 2;
  -moz-column-gap: 0px;
  column-count: 2;
  column-gap: 0px;
}

.photos-two-column img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

<section class="photos-two-column">
  <img src='https://picsum.photos/200/300'>
  <img src='https://picsum.photos/210/310'>
</section>

我期待这在两列中显示单个图像。

我究竟做错了什么？

Answer 1

据我所知，您已将两个图像放在同一部分中，因此它会将它们添加到同一列中。通过将它们放在自己的单独部分中，我创建了您想要的两个条形柱外观....

下面的片段:

.photos-two-column {
  /* Prevent vertical gaps */
  line-height: 0;
  -webkit-column-count: 1;
  -webkit-column-gap: 0px;
  -moz-column-count: 1;
  -moz-column-gap: 0px;
  column-count: 1;
  column-gap: 0px;
  display: inline-block;
}

.photos-two-column img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

<section class="photos-two-column">
  <img src='https://picsum.photos/200/300'>
</section>
<section class="photos-two-column">
  <img src='https://picsum.photos/210/310'>
</section>

您还可以使用表格创建两列外观(不推荐)，但这里有一个 fiddle :

img {
  /* Just in case there are inline attributes */
  width: 200px !important;
  height: 200px !important;
  border: none;
  display:block;
}

table {
  border: none;
  border-collapse: collapse;
}

td {
  vertical-align: bottom;
}

<table cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="https://media.mnn.com/assets/images/2018/04/sunset_through_oak_tree.jpg.653x0_q80_crop-smart.jpg" alt="Serious cat"></td>
    <td><img src="https://www.royalparks.org.uk/_media/images/the-green-park/trees/Trees-in-The-Green-Park.JPG/w_1200.jpg" alt="Cute cat"></td>
  </tr>
  <tr>
    <td><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTN-UGkcSneCbQ9LokQwT61YBcPWLJZO282mlJodcwbCFIN4ZaS&s" alt="Serious cat"></td>
    <td><img src="https://media.mnn.com/assets/images/2018/04/sunset_through_oak_tree.jpg.653x0_q80_crop-smart.jpg" alt="Serious cat"></td>
  </tr>
  <tr>
    <td><img src="https://www.royalparks.org.uk/_media/images/the-green-park/trees/Trees-in-The-Green-Park.JPG/w_1200.jpg" alt="Cute cat"></td>
    <td><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTN-UGkcSneCbQ9LokQwT61YBcPWLJZO282mlJodcwbCFIN4ZaS&s" alt="Serious cat"></td>
  </tr>
</table>

或者，您可以创建带有样式 div 的两列布局元素。这是我最推荐的三种格式:

.column {
  float: left;
  width: 200px;
  height: auto;
  border: none;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

img {
  height: auto;
  display: block;
  width: 200px;
}

<div class="row">
  <div class="column">
    <img src="https://media.mnn.com/assets/images/2018/04/sunset_through_oak_tree.jpg.653x0_q80_crop-smart.jpg" alt="Serious cat">
    <img src="https://www.royalparks.org.uk/_media/images/the-green-park/trees/Trees-in-The-Green-Park.JPG/w_1200.jpg" alt="Cute cat">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTN-UGkcSneCbQ9LokQwT61YBcPWLJZO282mlJodcwbCFIN4ZaS&s" alt="Serious cat">
    <img src="https://media.mnn.com/assets/images/2018/04/sunset_through_oak_tree.jpg.653x0_q80_crop-smart.jpg" alt="Serious cat">
  </div>
  <div class="column">
    <img src="https://www.royalparks.org.uk/_media/images/the-green-park/trees/Trees-in-The-Green-Park.JPG/w_1200.jpg" alt="Cute cat">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTN-UGkcSneCbQ9LokQwT61YBcPWLJZO282mlJodcwbCFIN4ZaS&s" alt="Serious cat">
  </div>
</div>