两列自适应布局的3种思路

妖狐艹你老母 2022-07-16 00:54 171阅读 0赞

#  #

# [两列自适应布局的3种思路][3] #

## 前面的话 ##

前面已经介绍过[单列定宽单列自适应][Link 1]的两列布局，而两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式。本文将从[float][]、[table][]和[flex][]来介绍两列自适应布局的3种思路。

### 思路一: float ###

在单列定宽单列自适应的两列布局中，经常用float和[负margin][margin]配合实现布局效果。但由于margin取值只能是固定值，所以在两列都是自适应的布局中就不再适用。而float和[overflow][]配合可实现两列自适应效果。使用overflow属性来触发[bfc][]，来阻止浮动造成的文字环绕效果。由于设置overflow:hidden并不会触发IE6-浏览器的[haslayout][]属性，所以需要设置zoom:1来兼容IE6-浏览器

![复制代码][copycode.gif]

![复制代码][copycode.gif]

<div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>        
    </div>

![复制代码][copycode.gif]

### 思路二: table ###

若table元素不设置table-layout:fixed，则宽度由内容撑开。在某个table-cell元素的外层嵌套一层div，并设置足够小的宽度如width:0.1%

![复制代码][copycode.gif]

![复制代码][copycode.gif]

<div class="parent" style="background-color: lightgrey;">
        <div class="leftWrap" style="background-color: pink;">
            <div class="left" style="background-color: lightblue;">
                <p>left</p>
            </div>        
        </div>
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>        
    </div>

![复制代码][copycode.gif]

### 思路三: flex ###

flex弹性盒模型是非常强大的布局方式。基本上，一般的布局方式都可以实现

\[注意\]IE9-不支持

![复制代码][copycode.gif]

<div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>        
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>        
    </div>

![复制代码][copycode.gif]

[3]: http://www.cnblogs.com/xiaohuochai/p/5454232.html
[Link 1]: http://www.cnblogs.com/xiaohuochai/p/5452865.html
[float]: http://www.cnblogs.com/xiaohuochai/p/5243735.html
[table]: http://www.cnblogs.com/xiaohuochai/p/5008466.html
[flex]: http://www.cnblogs.com/xiaohuochai/p/5323146.html
[margin]: http://www.cnblogs.com/xiaohuochai/p/5314289.html
[overflow]: http://www.cnblogs.com/xiaohuochai/p/5289653.html
[bfc]: http://www.cnblogs.com/xiaohuochai/p/5248536.html
[haslayout]: http://www.cnblogs.com/xiaohuochai/p/4845314.html
[copycode.gif]: /images/20220716/e52f08e675f14d5c9de3ebd2bff48ad3.png