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 属性进行模拟。