css常用布局 两栏、三栏 布局

我们在做pc端页面的时候、经常会用到这种布局、即两栏、 三栏布局。

如图所示：


这两种经典布局相信很多人都用过把。

现在分享一下我的布局方案吧（每个人布局风格不同 自然想法就不一样了。）

• 两栏布局：
  1、左（右）侧固定宽度：中间部分使用margin-left或margin- right（默认为auto）使之铺满右侧部分。

<div class="parent">
        <div class="left">111</div>
        <div class="right">222</div>
    </div>

.parent{
   
height: 400px;
overflow: hidden;
}
.left{
   
    float: left;
    height: 100%;
    width: 200px;
    background: yellow;
}
.right{
   
    height: 100%;
    margin-left: 200px;
    background: lawngreen;;
}

侧边使用 float：left属性 中间盒子自动尾随 其后设置margin-left：200px 实现对齐。

2、使用 绝对定位：

.left{
   
    
   position:absolute;
   left:0;
    width: 200px;
    background: yellow;
}
.right{
   
   
    margin-left: 200px