css三列布局代码模板

CSS三列布局是Web前端中常见的一种布局方式。它能使页面结构更加稳定，布局更加整洁。下面提供一份CSS三列布局代码模板，供读者参考。
首先，让我们来看看HTML代码：

<div class="wrapper">
  <div class="left"></div>
  <div class="right"></div>
  <div class="middle"></div>
</div> 

在HTML中，我们采用了一个div.wrapper元素包含了三个子元素。其中，.left和.right是两个固定宽度的侧边栏，而.middle是一个可自适应宽度的主内容区。
接下来，我们来看看CSS样式代码：

* {
  margin: 0;
  padding: 0;
}
<br>
.wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
<br>
.left,
.right {
  width: 250px;
  height: 100vh;
  background-color: #ccc;
}
<br>
.middle {
  flex: 1;
  height: 100vh;
  background-color: #eee;
} 

在样式代码中，首先我们将所有标签的margin和padding都设置为0，避免在布局时出现未知的偏差。接下来，我们对.wrapper进行样式设置。由于我们想要将整个布局限制在一个最大宽度为1200px的容器内，因此我们将wrapper设置为100%宽度、最大宽度1200px，并将其水平居中显示。同时，我们还使用display: flex与flex-wrap: wrap属性让子元素自动换行显示。
接着，我们对左右两个侧边栏进行样式设计。我们将它们的宽度都设置为250px，高度设置为100vh，使其铺满整个屏幕。为了区分三个区块，我们分别将它们的背景色设置为#ccc。
最后，我们对中间的主内容区进行样式设计。我们采用了flex: 1的方式让其自适应宽度，实现页面自适应效果。同时，我们将其高度设置为100vh，背景色设置为#eee，使其与侧边栏区分开来。
以上，就是关于CSS三列布局的代码模板示例。读者可以根据自己的需求进行修改和调整，实现更符合页面风格的布局效果。