CSS3列数

Question

我有一个宽度为100％的div，在这里我有大约10张图片，所有图片的宽度和大小都不同。我希望能够无缝地将这些图像漂浮在彼此周围，我已经设法了但是它们没有在屏幕上伸展，它们都被调整到相同的列宽...无论如何，我可以改变它，所以他们保持他们各自的大小，但互相填补？

我有这个：

.images {
   line-height:0;
   -webkit-column-count:6;
   -webkit-column-gap:0px;
   -moz-column-count:6;
   -moz-column-gap:0px;
   column-count:6;
   column-gap:0px;
   background:#545454;
   width:100%;
   display:inline-block;
}

.images img {
  width:100% !important;
  height:auto !important;
}

提前致谢！

Answer 1

column属性用于在列中设置文本，以便文本流从列的末尾继续到下一列的开头。将它们用于图像并不是一个好主意。

根据隐含目标的意思“将这些图像无缝地漂浮在彼此周围”和“在屏幕上伸展”和“他们保持各自的大小但是相互填充”，你可能会有点简单使用img 或将float: left 或放入HTML表格或使用CSS table进行模拟属性。