css實現兩欄布局的三種方法介紹（代碼）

本篇文章給大家帶來的內容是關於css實現兩欄布局的三種方法介紹（代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

1、浮動布局

左側欄固定寬度向左浮動，右側主要內容則用margin-left留出左側欄的寬度，預設寬度為auto，自動填滿剩下的寬度。

<div class="one"></div> <div class="two"></div>

        .one{            float: left;            width: 200px;            height: 200px;            background: darkcyan        }        .two{            margin-left: 200px;            height: 200px;            background: salmon        }

右側固定寬度，左側自適應則是同理，只要將固定欄右浮動，使用margin-right空出其寬度即可。

    <div class="one"></div>    <div class="two"></div>

        .one{            float: right;            width: 200px;            height: 200px;            background: darkcyan        }        .two{            margin-right: 200px;            height: 200px;            background: salmon        }

2、浮動布局+負外邊距（雙飛翼布局的兩欄版）

        <div class="aside"></div>    <div class="main">        <div class="content"></div>    </div>

        .aside{            width: 300px;            height: 100px;            background:darkcyan;            margin-right: -100%;            float: left;        }        .main{            width: 100%;            float: left;        }        .content{            margin-left: 300px;            background: salmon;        }

3、絕對位置

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

        .left{            width: 200px;            height: 200px;            position: absolute;            background: darkcyan        }        .right{            height: 200px;            margin-left:200px;             background: salmon;        }