css - CSS3列数

扫码查看

我有一个div,其宽度为100%,在其中,我有大约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;
}


提前致谢!

最佳答案

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

根据您所隐含目标的含义“将这些图像无缝地彼此围绕”和“在屏幕上伸展”,以及“它们保持各自大小,但彼此填充”,您可能会简单地将img元素一个接一个或使用float: left或将它们放在HTML表中或使用CSS table属性进行模拟。

关于css - CSS3列数,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/11905086/

10-11 22:49
查看更多