我有一个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/