之前为了解决问题百度到了一篇很好的博文，一直想找时间来总结一下。
- 通常两栏布局都是让写两个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。
网友评论