html + css 布局技巧总结 ——多列布局
在HTML和CSS中实现多列布局的一种常见方法是使用CSS Flexbox。以下是一个简单的例子，展示如何使用Flexbox创建一个具有三个列的布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Layout Example</title>
<style>
.container {
display: flex; /* 使用Flexbox布局 */
}
.column {
flex: 1; /* 每个列平分空间 */
padding: 10px; /* 列的内边距 */
}
</style>
</head>
<body>
<div class="container">
<div class="column">
<p>Column 1</p>
<!-- 内容 -->
</div>
<div class="column">
<p>Column 2</p>
<!-- 内容 -->
</div>
<div class="column">
<p>Column 3</p>
<!-- 内容 -->
</div>
</div>
</body>
</html>在这个例子中，.container 类使用 display: flex 属性来指定Flexbox布局。.column 类使用 flex: 1 来确保所有列平等地分配容器的空间。这种方法提供了一个灵活的多列布局，适用于各种屏幕尺寸和设备。
评论已关闭