两栏布局的多种方式

之前为了解决问题百度到了一篇很好的博文，一直想找时间来总结一下。

- 通常两栏布局都是让写两个div

<div class="content">

    <div class="left" style="color:black"></div>

    <div class="right" style="color:orange"></div>

</div>

在不做任何操作的条件下，其样式为：

1.img

这个效果是因为div是块级元素，所以每个div都要独占一行。

一、最常用又最简单的布局就是：左边固定宽度，右边自适应

实现方法是用float+margin-right：

.left{

    background:black;

    width:200px;

    float:left;

}

    .right{

    background:orange;

    margin-left:200px;

}

二、利用相对定位来设置，即position:absolute

.content{

    position:relative;

    width:100%;

    height:300px;

    border:1px solid #000;

}

.left{

    background:black;

    width:200px;

    position:absolute;

}

.right{

    background:orange;

    position:abosulte;

    left:200px;

    right:0;

}

三、Flex布局

Flex布局是Flexible Box的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。容器默认存在两根轴：水平的主轴和垂直的交叉轴，主轴的开始位置叫做main start，结束位置叫做Main end，交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。