多栏布局

今天来讲讲常见布局中常见的多栏布局，包括2栏布局和3栏布局

2栏布局(左侧定宽，右侧自适应)

基本的html结构如下：

<div class="parent">
        <div class="left">left</div>
        <div class="right">这是右边这是右边这是右边这是右边这是右边这是右边这是右边这是右边这是右边这是右边这是右边这是右边这是右边这是右边这是右边这是右边这是右边这是右边这是右边这是右边这是右边这是右边这是右边这是右边这是右边</div>
</div>
复制代码

默认的样式：

.parent {
    background: gray;
    height: 200px;
}
.left {
    background: pink;
}
.right {
    background: green;
}
复制代码

显示的效果就是这样的：

1. float + margin-left

   让左边的div左浮动，设置100px的宽，然后表现就是这样，右边的文字环绕着左边的div

   这是浮动的默认表现形式，文字环绕效果，但是为了让达到我们的布局效果，需要给右边的div设置一个margin-left：100px，width不用设置，100px就是左边div的宽度

   最后，我们可以加个间距，给右边边的div设置margin-right: 120px，这样左右2个div之间就有20px的间距啦

   完整的样式就是：

   .left {
       float: left;
       width: 100px;
   }
   .right {
   	margin-left: 120px;
   }
   复制代码

2. float + overflow

   我们首先还是让左边的div浮动且宽度是100px，然后右边的div设置overflow:hidden

   这其实是BFC的原理，我们设置了overflow不为visible的值，就可以触发div的BFC，就不会和左边的div重叠了，这是BFC的一个重要应用。

   最后，为了让2个div之间有20px的间距，给左边的div设置margin-right: 20px就可以，或者给右边的div设置margin-left: 120px(注意这里是120px而不是20px)

   完整的样式就是：

   .left {
       float: left;
       width: 100px;
       margin-right: 20px
   }
   .right {
       overflow: hidden;
       /* margin-left: 120px; */
   }
   复制代码

3. table

   这种方法就是模拟原生table的效果来实现2列布局，首先给parent元素设置display:table，width:100%(table默认宽度随便内容撑开)，再分别给left和right设置display:table-cell

   再给左边的div设置100px的宽度

   但是这个地方有个问题，如果我们把左边div中的内容增多，表现就成了这个样子

   很明显着不对，左边的div已经不是固定的100px了，已经超过了100px，所以我们要给外面的div增加一个table-layout:fixed的属性，让布局优先

   完整的样式如下：

   .parent {
       display: table;
       table-layout:fixed;
       width: 100%;
   }
   .left,
   .right {
       display: table-cell;
   }
   .left {
       width: 100px;
   }
   复制代码

4. flex

   最后一种就是flex的方式了

   比较简单，直接上样式

   .parent {
   	display: flex;
   }
   .left {
   	width: 100px;
   }
   .right {
   	flex: 1;
   }
   复制代码

转载于:https://juejin.im/post/5be6549051882516df030ef4