image - CSS3 列数

Question

我有一个宽度为 100% 的 div，里面有大约 10 张图片，所有图片的宽度和大小都不同。我希望能够无缝地将这些图像彼此 float ，我已经做到了，但它们不会在屏幕上拉伸(stretch)，它们都调整为相同的列宽......无论如何我可以改变这个所以他们保持它们各自的大小但彼此填充？

我有这个:

.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 属性用于设置列中的文本，以便文本流从一列的末尾继续到下一列的开头。将它们用于图像不是一个好主意。

根据您所说的隐含目标“将这些图像无缝地围绕彼此 float ”和“在屏幕上拉伸(stretch)”和“它们保持各自的大小但彼此填充”的含义，您可能会很简单就像将 img 元素一个接一个地放置 或 使用 float: left 或 将它们放入 HTML 表格或模拟具有 CSS table 属性。