CSS盒子是网页设计中最重要的元素之一,而在CSS盒子中放置多张照片也是常见的需求。下面我们将探讨一些常用的方法。
/* 使用 float 属性 */ .photos { width: 100%; } .photo { width: 30%; margin: 1%; float: left; }
上述示例代码中,我们使用了CSS的float属性。我们将每张照片放在一个class为photo的div中,再将所有photo div包裹在一个class为photos的div中。
我们设置了每个.photo div的宽度为30%,并在它的左、上两侧留出了1%的边距。这样,三个.photo div的宽度之和为93%,加上3%的边距,总宽度接近100%。
通过 float 属性,我们让每个.photo div都向左浮动。这样,它们会按照从左到右的顺序排列。如果浏览器窗口尺寸不够,超出的部分会被隐藏。
/* 使用 flexbox 布局 */ .photos { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; } .photo { flex: 1 0 30%; margin: 1%; }
上述示例代码中,我们使用了CSS3的flexbox布局。我们同样使用.photo和.photos div,但是这一次我们将 .photos 的 display 属性设置为 flex,并使用 flex-direction 属性来指定子元素垂直排列。
通过 flex 属性,我们将每个子元素的宽度设为相等。使用 flex-wrap 属性,我们确保它们在窗口太小时能够适应。使用 margin 属性调整每个.photo的外边距。
这两种方法都可以用来放置多个照片。具体使用哪个方法,则根据需求和个人喜好而定。