DIV+CSS实现3栏布局（左右固定200px中间自适应）

DIV+CSS实现3栏布局（左右固定200px中间自适应）

使用DIV+CSS实现三栏布局（左右固定200px，中间自适应）是网页布局中的常见需求。以下是几种实现方法：

方法1：使用浮动（Float）

通过浮动实现左右固定宽度，中间自适应的布局。

HTML：

<div class="container">
    <div class="left">左侧栏</div>
    <div class="right">右侧栏</div>
    <div class="center">中间内容</div>
</div>

CSS：

.container {
    overflow: hidden; /* 清除浮动 */
}

.left, .right {
    width: 200px;
    height: 100vh; /* 高度占满视口 */
    background-color: #ccc;
}

.left {
    float: left; /* 左浮动 */
}

.right {
    float: right; /* 右浮动 */
}

.center {
    margin: 0 200px; /* 左右留出200px */
    background-color: #f0f0f0;
    height: 100vh;
}

方法2：使用Flexbox

通过Flexbox实现灵活的布局。

HTML：

<div class="container">
    <div class="left">左侧栏</div>
    <div class="center">中间内容</div>
    <div class="right">右侧栏</div>
</div>

CSS：

.container {
    display: flex;
    height: 100vh;
}

.left, .right {
    width: 200px;
    background-color: #ccc;
}

.center {
    flex: 1; /* 中间自适应 */
    background-color: #f0f0f0;
}

方法3：使用Grid布局

通过CSS Grid实现简洁的三栏布局。

HTML：

<div class="container">
    <div class="left">左侧栏</div>
    <div class="center">中间内容</div>
    <div class="right">右侧栏</div>
</div>

CSS：

.container {
    display: grid;
    grid-template-columns: 200px 1fr 200px; /* 左右固定200px，中间自适应 */
    height: 100vh;
}

.left, .right {
    background-color: #ccc;
}

.center {
    background-color: #f0f0f0;
}

方法4：使用绝对定位

通过绝对定位实现左右固定，中间自适应的布局。

HTML：

<div class="container">
    <div class="left">左侧栏</div>
    <div class="center">中间内容</div>
    <div class="right">右侧栏</div>
</div>

CSS：

.container {
    position: relative;
    height: 100vh;
}

.left, .right {
    position: absolute;
    top: 0;
    width: 200px;
    height: 100vh;
    background-color: #ccc;
}

.left {
    left: 0;
}

.right {
    right: 0;
}

.center {
    margin: 0 200px; /* 左右留出200px */
    background-color: #f0f0f0;
    height: 100vh;
}

方法5：使用表格布局

通过display: table实现三栏布局。

HTML：

<div class="container">
    <div class="left">左侧栏</div>
    <div class="center">中间内容</div>
    <div class="right">右侧栏</div>
</div>

CSS：

.container {
    display: table;
    width: 100%;
    height: 100vh;
}

.left, .center, .right {
    display: table-cell;
}

.left, .right {
    width: 200px;
    background-color: #ccc;
}

.center {
    background-color: #f0f0f0;
}

总结

以下是几种实现三栏布局的方法对比：

方法	优点	缺点
浮动（Float）	兼容性好	需要清除浮动
Flexbox	灵活，代码简洁	兼容性较差（IE9及以下不支持）
Grid布局	代码简洁，功能强大	兼容性较差（IE11及以下不支持）
绝对定位	实现简单	布局不够灵活
表格布局	兼容性好	语义化较差

推荐使用Flexbox或Grid布局，因为它们更现代、灵活且代码简洁。如果需要兼容旧版浏览器，可以选择浮动或表格布局。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github