<html>
<head>
<title>CSS 三栏布局</title>
<style type="text/css">
#container {
width: 100%;
height: 500px;
margin: 0 auto;
position: relative;
}
#left {
width: 20%;
height: 500px;
background: #f1f1f1;
position: absolute;
top: 0;
left: 0;
}
#right {
width: 20%;
height: 500px;
background: #f1f1f1;
position: absolute;
top: 0;
right: 0;
}
#middle {
width: 60%;
height: 500px;
background: #fff;
position: absolute;
top: 0;
left: 20%;
right: 20%;
}
</style>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
</body>
</html>在上述代码中，大家使用了三个 id 名分别为 left、middle、right 的 div 标签，这是整个布局的关键点。
其中，container 标签的 position 属性设置为 relative，这是主要是为了让 left、middle、right 标签相对于 container 标签进行定位。
left 和 right 标签的宽度都被设置为 20%，因此它们都放置在了页面的两侧，并且其高度均为 500px，背景颜色为 #f1f1f1。
中间的 middle 标签是最大的，宽度为 60%，高度为 500px，背景颜色为 #fff，这使得页面中间部分有了更大的空间来展示更多的内容。
通过上述 CSS 样式的设置，大家就可以实现一个简单的 CSS 垂直三栏布局，可以在其中展示各种不同的内容，非常方便实用。这种布局方式经常用于较大型的新闻、网站等等，可以更好地实现内容的分类和区分，提高用户的阅读体验。