CSS实现三栏自适应布局（两边固定，中间自适应）
可以使用CSS的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;
}
.side {
flex: 0 0 100px; /* 固定宽度 */
background: #ddd;
text-align: center;
}
.middle {
flex-grow: 1; /* 占据剩余空间 */
background: #f3f3f3;
min-width: 0; /* 防止内部内容过小导致middle变窄 */
}
</style>
</head>
<body>
<div class="container">
<div class="side">左边栏</div>
<div class="middle">中间自适应区域</div>
<div class="side">右边栏</div>
</div>
</body>
</html>在这个例子中，.container 是一个flex容器。.side 类代表两边固定宽度的栏，使用 flex: 0 0 100px; 定义，意味着这两个侧边栏的宽度是100px，不会缩放也不会增长。.middle 类代表中间自适应的部分，使用 flex-grow: 1; 定义，意味着它会占据所有剩余的空间。
评论已关闭