css上左右三栏布局

CSS的三栏布局是一个常用的页面布局方式，它将整个页面分为左、右、中三栏，中间栏通常是主要内容区域，而左右两栏则负责呈现一些辅助信息，如导航菜单、广告等内容。下面我们来看一下如何用CSS实现上左右三栏布局。

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

首先，我们需要先给整个页面加上一个wrapper容器，然后在容器中分别添加三个子元素，分别是左侧栏、右侧栏和中间栏。接下来我们需要给三个子元素设置样式进行布局。

 .wrapper {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
  .left {
    width: 20%;
    float: left;
  }
  .right {
    width: 20%;
    float: right;
  }
  .center {
    width: 60%;
    float: left;
  } 

我们给wrapper容器设置了宽度为100%和居中的margin，同时还将overflow设为了hidden，这是为了让左右两栏完全包裹在中间栏的周围，避免出现重叠和跑位的情况。接下来我们给左右两栏设置了宽度为20%，并使用float属性将它们分别浮动到页面的左右两侧，而中间栏则设置了宽度为60%，并同样使用float属性让它排在左侧栏的右边。

另外，我们还可以使用padding或者margin来调整三栏之间的间距。需要注意的是，如果要为三栏设置背景颜色或者边框的话，需要在每个子元素里面再嵌套一个div，否则会影响到整个布局。

总的来说，CSS的上左右三栏布局非常灵活和便捷，只需要使用简单的float属性和几行简单的代码，就可以轻松实现一个美观、实用的三栏布局。