css3 column多列布局—瀑布流效果
CSS3多列布局可以用来创建瀑布流效果。您可以使用column-count属性来指定列的数量，或者使用column-width属性来指定列宽。然后，使用break-inside: avoid;属性来避免内容跨列分割。以下是一个简单的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Column Layout for Masonry Effect</title>
<style>
.masonry {
column-count: 4;
column-gap: 1em; /* Gap between columns */
}
.masonry-item {
break-inside: avoid; /* Avoid content breaking across columns */
padding: 1em;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
/* Just for styling */
body {
margin: 0;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div class="masonry">
<div class="masonry-item">Column item 1</div>
<div class="masonry-item">Column item 2</div>
<div class="masonry-item">Column item 3</div>
<!-- ... more .masonry-item elements ... -->
</div>
</body>
</html>在这个例子中，.masonry 类定义了一个带有4列的瀑布布局，列间隔为1em。.masonry-item 类避免了内容在列之间分割，并为每个列项提供了一定的填充和样式。
评论已关闭