两列布局中单列定宽单列自适应布局的5种思路

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

## 前面的话 ##

说起自适应布局方式，单列定宽单列自适应布局是最基本的布局形式。本文将从float、inline-block、table、absolute和flex这五种思路来详细说明如何巧妙地实现布局

### 思路一: float ###

说起两列布局，最常见的就是使用[float][]来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果，以及需要及时[清除浮动][Link 1]。如果各浮动元素的高度不同时，可能会出犬牙交错的效果

【1】float + margin

将定宽的一列使用float，而自适应的一列使用计算后的margin

![复制代码][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]

src="http://sandbox.runjs.cn/show/vphu7fow" frameborder="0" width="320" height="240" style="line-height: 1.5; width: 701px; height: 60px;">

\[缺点1\]IE6-浏览器下3像素bug，具体表现在右侧首行文字会向右偏移3px。解决办法是在left元素上设置margin-right: -100px

id="iframe\_0.010344126968008904" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/ie6-1.gif?\_=0.668709518154754%22%20style=%22border:none;max-width:701px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe\_0.010344126968008904',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no" style="border-width: initial; border-style: none; width: 701px; height: 347px;">

\[缺点2\]当右侧容器中有元素[清除浮动][Link 1]时，会使该元素不与左侧浮动元素同行，从而出现文字下沉现象

id="iframe\_0.23158991990024203" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/ie6-2.gif?\_=0.3649423900892612%22%20style=%22border:none;max-width:701px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe\_0.23158991990024203',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no" style="border-width: initial; border-style: none; width: 701px; height: 442px;">

【2】float + margin + (fix)

(fix)代表增加结构，为了解决上述方法中的两个缺点，可以通过增加结构来实现。自适应的一列外侧增加一层结构.rightWrap并设置浮动。要实现自适应效果，.rightWrap宽度必须设置为100%。若不设置，float后的元素宽度将由内容撑开。同时再配合[盒模型][Link 2]属性的计算，设置计算后的[负][Link 3][margin][Link 3]值，使两列元素在同一行显示。同时两列之间的间距由.right的margin值确定。由于右侧元素会层叠在左侧元素之上，.left需要使用[relative][]来提升层级

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

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

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

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

【3】float + margin + calc

除了增加结构的方法外，还可以使用calc()

\[注意\]IE8-、android4.3-、IOS5.1-不支持，android4.4+只支持加减运算

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

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

【4】float + overflow

还可以使用overflow属性来触发[bfc][]，来阻止浮动造成的文字环绕效果。由于使用overflow不会改变元素的宽度属性，所以不需要重新设置宽度。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性，所以需要设置zoom:1来兼容IE6-浏览器

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

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

### 思路2: inline-block ###

inline-block内联块布局的主要缺点是需要设置垂直对齐方式[vertical-align][]，则需要处理换行符解析成空格的间隙问题。IE7-浏览器不支持给块级元素设置inline-block属性，兼容代码是display:inline;zoom:1;

【1】inline-block + margin + calc

一般来说，要解决inline-block元素之间的间隙问题，要在父级设置font-size为0，然后在子元素中将font-size设置为默认大小

\[注意\]IE8-、android4.3-、IOS5.1-不支持，android4.4+只支持加减运算

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

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

【2】inline-block + margin + (fix)

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

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

### 思路3: table ###

使用[table][]布局的缺点是元素被设置为table后，内容撑开宽度，所以需要设置width:100%。若要兼容IE7-浏览器，需要改为<table>结构。由于table-cell元素无法设置margin，若需要在元素间设置间距，需要增加结构

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

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

### 思路4: absolute ###

[absolute][]布局的缺点是由于父元素需要设置为[relative][relative 1]，且子元素设置为absolute，所以父元素的高度并不是由子元素撑开的，需要单独设置。

\[注意\]IE6-不支持相对的偏移属性同时设置

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

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

### 思路5: flex ###

[flex][]弹性盒模型是非常强大的布局方式。但由于其性能消耗较大，适合于局部小范围的布局

\[注意\]IE9-不支持

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

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

[float]: http://www.cnblogs.com/xiaohuochai/p/5243735.html
[Link 1]: http://www.cnblogs.com/xiaohuochai/p/5248981.html
[copycode.gif]: /images/20220716/b3df06e161f34bb393801ff7a20fc109.png
[Link 2]: http://www.cnblogs.com/xiaohuochai/p/5202597.html
[Link 3]: http://www.cnblogs.com/xiaohuochai/p/5314289.html
[relative]: http://www.cnblogs.com/xiaohuochai/p/5321487.html
[bfc]: http://www.cnblogs.com/xiaohuochai/p/5248536.html
[vertical-align]: http://www.cnblogs.com/xiaohuochai/p/5271217.html#anchor2
[table]: http://www.cnblogs.com/xiaohuochai/p/5008466.html
[absolute]: http://www.cnblogs.com/xiaohuochai/p/5312917.html
[relative 1]: http://www.cnblogs.com/xiaohuochai/p/5321487.html#anchor1
[flex]: http://www.cnblogs.com/xiaohuochai/p/5323146.html