多列布局-网易云课堂微专业-页面架构-布局解决方案

⑴定宽与自适应

一列定宽 + 一列自适应

Methods ①：float + margin

优点：非常容易理解
缺点：兼容性有点点问题，IE6以下Bug，right里面的文字往右缩3px，
解决办法：在left容器上加上margin-right: -100px;

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

.left{
    float: left;
    width: 100px;
}
.right{
    margin-left:120px;
}

Methods ②：float + margin + (fix)

优点：因为都是浮动的，不会出现3px的问题，兼容性非常好
缺点：left元素被盖住了，解决方案：position: relative;结构多，写的样式也多

<div class="parent">
    <div class="left"><p>left</p></div>
    <div class="right-fix"> //套一个class="right-fix"节点
        <div class="right">
            <p>right</p><p>right</p>
        </div>
    </div>
</div>

.left{
    float: left;
    width: 100px;
    position: relative; //解决left元素被盖住
}
.right-fix{
        float: right; width: 100%; //元素会掉下去
        margin-left: -100px; //左侧空出100px
}
.right{
    margin-left:120px;
}

Methods ③：float + overflow

优点：样式简单，只需设置left、right就可以了
缺点：IE6下不支持

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

.left{
    float: left;
    width: 100px;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}

Methods ④：table

缺点：代码太多

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

.parent{
    display: table; 
    width: 100%;
    table-layout: fixed; //可以加速table渲染，实现布局优先
}
.left,.right{
    display: table-cell;
}
.left{
    width: 100px;
    padding-right: 20px;
}

Methods ⑤：flex

缺点：兼容性问题，性能问题，做小范围布局，不能做大范围布局

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

.parent{
    display: flex;
}
.left{
    width: 100px;
    margin-right: 20px;
}
.right{
    flex: 1;
}

两列定宽 + 一列自适应

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="center"> //增加一个center
        <p>center</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

.left,.center{ //增加一个center
    float: left;
    width: 100px;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}

⑵不定宽与自适应

一列不定宽 + 一列自适应

Methods ①：float + margin(做不到)

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

.left {
    float: left;
    margin-right: 20px;
}
.right {
    overflow: hidden;
}
.left p {
    width: 200px;
}

Methods ②：float + margin + (fix)(做不到)

<div class="parent">
    <div class="left"><p>left</p></div>
    <div class="right-fix"> //套一个class="right-fix"节点
        <div class="right">
            <p>right</p><p>right</p>
        </div>
    </div>
</div>

Methods ③：float + overflow

优点：很多解决方案都会用到
缺点：IE6下不支持

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

.left {
    float: left;
    margin-right: 20px;
}

.right {
    overflow: hidden;
}

.left p {
    width: 200px;
}

Methods ④：table

缺点：代码太多

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

.parent{
    display: table; width: 100%;
}
.left,.right{
    display: table-cell;
}
.left{
    width: 0.1%; //兼容性问题，IE8，IE6/7不支持
    padding-right: 20px;
}
.left p{
    width:200px;
}

Methods ⑤：flex

缺点：兼容性问题，性能问题，做小范围布局，不能做大范围布局

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

.parent{
    display: flex;
}
.left{
    width: 200px;
    margin-right: 20px;
}
.right{
    flex: 1;
}

两列不定宽 + 一列自适应

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="center">
        <p>center</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

.left,.center{
    float: left;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}
.left p,.center p{
    width: 100px;
}

⑶等分

Methods ①：float

缺点：如果column列数发生改变，需要修改width: 25%;

<div class="parent">
    <div class="column"><p>1</p></div>
    <div class="column"><p>2</p></div>
    <div class="column"><p>3</p></div>
    <div class="column"><p>4</p></div>
</div>

.parent{
    margin-left: -20px;
}
.column{
    float: left;
    width: 25%; //如果column列数发生改变，需要修改width: 25%;
    padding-left: 20px;
    box-sizing: border-box; 
}

Methods ②：table

特点：每一列不需要设置25%;
缺点：外面多了一层容器

<div class="parent-fix">
    <div class="parent">
        <div class="column"><p>1</p></div>
        <div class="column"><p>2</p></div>
        <div class="column"><p>3</p></div>
        <div class="column"><p>4</p></div>
    </div>
</div>

.parent-fix{
    margin-left: -20px;
}
.parent{
    display: table;
    width:100%;
    table-layout: fixed;
}
.column{
    display: table-cell;
    padding-left: 20px;
}

Methods ③：flex

缺点：兼容性

<div class="parent">
    <div class="column"><p>1</p></div>
    <div class="column"><p>2</p></div>
    <div class="column"><p>3</p></div>
    <div class="column"><p>4</p></div>
</div>

.parent{
    display: flex;
}
.column{
    flex: 1;
}
.column+.column{
    margin-left:20px;
}

⑷等高

Methods ①：table

table特性：每列单元格都是等宽，每行单元格都是等高

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

.parent{
    display: table; 
    width: 100%;
    table-layout: fixed; //可以加速table渲染，实现布局优先
}
.left,.right{
    display: table-cell;
}
.left{
    width: 100px;
    padding-right: 20px;
}

Methods ②：flex 

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

.parent{
    display: flex;
}
.left{
    width: 100px;
    margin-right: 20px;
}
.right{
    flex: 1;
}

Methods ③：float

优点：兼容性比较好
缺点：伪等高，不是真正意义上的等高

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

.parent{
    overflow: hidden;
}
.left,.right{
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
.left{
    float: left; width: 100px;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容