css布局——两栏自适应布局

三栏布局：CSS布局：圣杯布局，双飞翼布局，Flex布局，绝对定位

 

两栏布局：

• 一栏定宽，一栏自适应
• 一栏不定宽，一栏自适应

常见的方法：

1. 浮动 float+BFC         解决（不）定宽
2. 浮动 float+margin     解决定宽
3. 决定定位 absolute    解决定宽
4. flex布局                    解决（不）定宽

 

一、浮动：左 float:left;  右 margin-left / overflow:hidden；

基本上我们看到这种并列排排站的布局，可能第一时间就会想到浮动。左浮动排队。

不过这里其实一个浮动就行了：

利用浮动实现文字环绕图片的效果，只需要给左边的图片一个左浮动，右边的文字会自动贴合围绕左边的图片。

然后我们再把右边文字的环绕解决就行了（比如让其形成bfc：规矩成块，打破环绕。或者直接粗暴的margin远离图片）。

<div class="left">left</div>
<div class="right">right</div>
    

.left,.right{
    height: 200px;
}
.left{
    float:left;
    width: 200px;
    background-color:skyblue;
}
.right{
    margin-left: 200px;             //右栏远离左栏
    overflow:hidden;                //触发BFC模式 解决文字环绕
    background-color: greenyellow;
}

 

float实现关键点解析

1. 共同父元素cont需要清除浮动。可使用我们常用的伪元素清除浮动法或者直接利用bfc清除浮动。

2. 左边图片左浮动float：left、固定宽度、设置margin-right（具体看需求）；

3. 右边文案自适应、overflow或padding或者margin解除文字环绕效果。注意padding或margin值=左边图片的宽度+二者之间的间距

4. 如果想要图片和文案是垂直居中的不太好实现

 

二、定位： 左 absolute  右margin-left

有了第一种浮动流的思想启示，我们可以想到，既然浮动元素不占据父元素流体空间，从而让文案部分通过block自适应，达到了占据父元素的全部空间的效果。

那么另一种，通过绝对定位让左边元素漂浮起来，而不占用父元素流体空间，是不是也就可以实现这种效果了呢？

<div class="wrap">
	<div class="left">left</div>
	<div class="right">right</div>
</div>

.wrap{
    position : relative; 
}
.left{ 
    width: 200px; 
    position: absolute; 
    top: 0; 
    right: 0;
}
.right{ 
   margin-left:200px
}

absolute实现关键点解析

1. 父元素设置relative相对定位以限制图片的绝对定位、因为父元素的高度此时是需要文案高度撑开的，所以需要设置最低高度防止文案过少时父元素低于低于图片高度

2. 图片使用absolute，"漂浮"起来。如果还想垂直居中，

3. 右边文案此时只需要空开左边图片宽度+间距的位置即可

4. 可以让左边图片垂直居中：图片用上50%的top+marginTop的负高度一半。原理或其他css3方法详见《垂直居中布局的一百种实现方式》

 

三、flex - 弹性布局

<div class="wrap">
	<div class="left">left</div>
	<div class="right">right</div>
</div>


.wrap{
    display: flex;         //弹性布局
    justify-content: space-between;
    align-items: center;
}
.left,.right{
    height: 200px;
}
.left{
    width: 200px;
    background-color:skyblue;
}
.right{
    flex: 1;          //流体文案设置flex:1;自动分配剩余空间。
    padding-left: 20px;
    background-color: greenyellow;
}

flex布局实现关键点解析

1. 父元素设置display:flex;和justify-content:space-bettween;(两端对齐)

2. 父元素根据需要设置align-item:center;以实现垂直居中

3. 图片固宽元素不需要特殊设置，宽高即可

4. 流体文案设置flex:1;自动分配剩余空间。

 

 

参考：

css布局 - 两栏自适应布局的几种实现方法汇总

页面两栏布局