2017-03-12

两列布局

总结一下css实现左侧固定宽度，右侧自适应的两列布局实现方案

1. float + margin-left

左侧左浮动，右侧设置margin-left值为左侧的宽度。

<div class="wrapper">
    <div class="left1">left</div>
    <div class="right1">right</div>
</div>
<style>
    .left1{
        width:200px;
        float:left;
        background:red;
    }
    .right1{
        margin-left:200px;
        background:orange;
    }
</style>

2. 绝对定位 + margin-left

左侧绝对定位，右侧设置margin-left为左侧的宽度，此时包裹元素需要设置position：relative。

<div class="wrapper">
    <div class="left2">left</div>
    <div class="right2">right</div>
</div>
<style>
    .wrapper{
        position:relative;
    }
    .left2{
        width:200px;
        position: absolute;
        top:0;
        left:0;
        background:red;
    }
    .right2{
        margin-left:200px;
        background:orange;
    }
</style>

3. float + 创建新的BFC

左侧左浮动，右侧通过overflow：hidden创建一个新的BFC

<div class="wrapper">
    <div class="left3">left</div>
    <div class="right3">right</div>
</div>
<style>
    .left3{
        width:200px;
        float:left;
        background: red;
    }
    .right3{
        overflow: hidden;
        background: orange;
    }
</style>

4. float + 负边距

左侧和右侧都浮动，左侧设置一个负的和宽度值一样的右边距，右侧用一个div包裹，包裹div宽度设置为100%，内容设置margin-left为左侧的宽度。

<div class="wrapper">
    <div class="left4">left</div>
    <div class="right4">
        <div class="content">right</div>
    </div>
</div>
<style>
    .left4{
        width:200px;
        float:left;
        margin-right:-100%;
        background: red;
    }
    .right4{
        width:100%;
        float:left;
    }
    .content{
        margin-left: 200px;
        background: orange;
    }
</style>

5. display:table + display:table-cell

包裹元素设置为display：table，且宽度为100%，左右两侧都设置为display：table-cell，设置左侧的宽度。

<div class="wrapper">
    <div class="left5">left</div>
    <div class="right5">right</div>
</div>
<style>
    .wrapper1{
        display: table;
        width:100%;
    }
    .left5{
        width:200px;
        display:table-cell;
        background: red;
    }
    .right5{
        display: table-cell;
        background: orange;
    }
</style>

6. 左右都绝对定位

左右两侧都设置绝对定位，右侧的left设置为左侧的宽度。这种方法的问题是当右侧的内容比较少时，右侧并没有占据剩下的全部宽度。

<div class="wrapper">
    <div class="left5">left</div>
    <div class="right5">right</div>
</div>
<style>
    .wrapper{
        position:relative;
    }
    .left2{
        width:200px;
        position: absolute;
        top:0;
        left:0;
        background:red;
    }
    .right2{
        position: absolute;
        top:0;
        left:200px;
        background:orange;
    }
</style>

本文标题:两列布局

文章作者:小蕾蕾

发布时间:2017年03月12日 - 21时01分

最后更新:2018年04月28日 - 11时01分

原始链接:http://wanglei-0707.github.io/2017/03/12/两列布局/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。