css实现三列等宽等间距排列(九宫格)
CSS可以通过Flexbox或Grid布局实现三列等宽等间距排列。以下是使用Flexbox实现的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>九宫格布局</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box {
flex-basis: calc(100% / 3); /* 每列宽度为总列数的1/3 */
box-sizing: border-box;
padding: 10px; /* 间距 */
background-color: #f0f0f0;
border: 1px solid #ddd;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>
</body>
</html>这段代码中.container是外部容器，使用display: flex和flex-wrap: wrap属性实现Flexbox布局，并允许内容多行排列。.box是每个格子的类，使用flex-basis属性设置每个格子的基础宽度，以保证三列等宽，并使用padding属性设置格子间的间距，justify-content: space-between则保证列之间的等间距排列。
评论已关闭