1

我有一个宽度为 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;
}

提前致谢！

4

1 回答 1

2

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

根据隐含目标的含义，“这些图像无缝地围绕彼此浮动”和“在屏幕上伸展”和“它们保持各自的大小但彼此填充”，您可能会像放img一个接一个的元素，或者使用float: left 或将它们放入 HTML 表格中，或者使用 CSStable属性模拟它。

于 2012-08-10T16:07:01.213 回答