css实现左中右结构

CSS是实现网页排版的重要工具之一，其中实现左中右结构是常见的一种方式。下面是一个简单的示例：

html,body{
  margin:0;
  padding:0;
}

.container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:100vh;
}

.left{
  width:200px;
  height:100%;
  background-color:#f0f0f0;
}

.middle{
  flex:1;
  height:100%;
  background-color:#d9d9d9;
}

.right{
  width:200px;
  height:100%;
  background-color:#f0f0f0;
}

上面的代码使用了flex布局来实现左中右三列的布局，其中左右两列的宽度固定，中间一列使用了flex:1来自适应剩余的空间。同时，设置了align-items:center来使三列垂直居中。

通过更改.left,.middle,.right的样式，可以轻松地改变三列的宽度、颜色等样式。

总的来说，使用CSS实现左中右结构是非常方便的，可以通过灵活的控制样式来实现不同的布局效果。