多列布局方案

兩欄佈局

  • 左側固定右側自適應
  • 右側固定左側自適應

技術原理(左側固定右側自適應)

  • 結構上左右兩個盒子,左側設置爲固定寬度,右側設置爲100%
  • 給左側盒子設置絕對定位
  • 給右側盒子設置一個子盒,並且給盒子設置左外邊距,留出左盒空間

代碼

<div class="wrap">
    <div class="left">left盒子</div>

    <div class="right">
        <div class="son">right盒子</div>
    </div>
</div>

.left {
    position: absolute;
    width: 300px;
    min-height: 200px;
    background-color: aqua;
}

.right {
    width: 100%;
    min-height: 200px;
    background-color: pink;
}

.son {
    padding-left: 300px;
}

三欄佈局

  • 左右盒子固定寬度,中間盒子自適應
(1)聖盃佈局

技術原理

  • 結構上需要三個盒子,左側盒子、右側盒子、中間盒子。中間盒子放在前面,兩邊盒子後面,這樣做的目的是因爲中間的內容一般比較重要,放在前面可以優先加載,利於用戶體驗。
  • 左右盒子設置固定寬度,中間盒子設置100%。
  • 給子盒子設置浮動
  • 利用margin-left將左右盒子拉到中間盒子兩側。
    左邊margin-left:-100%;右邊margin-left:-自身的寬度;
  • 將中間盒子露出來,給三個盒子的父元素設置
    padding-left:左側盒子的寬度;padding-right:右側盒子的距離;
  • 利用相對定位將左右盒子歸位
    左側設置left:-自身的寬度;左側設置right:-自身的寬度;

代碼實現

<div class="wrap">
    <div class="center">中間盒子</div>
    <div class="left">left盒子</div>
    <div class="right">right盒子</div>
</div>
.wrap div {
    float: left;
    min-height: 200px;
}

.wrap {
    padding: 0 300px 0 200px;
}

.left {
    position: relative;
    left: -200px;
    width: 200px;
    background: aqua;
    margin-left: -100%;
}

.right {
    position: relative;
    right: -300px;
    width: 300px;
    background: pink;
    margin-left: -300px;
}

.center {
    width: 100%;
    background: yellow;
}

(2)雙飛翼佈局

雙飛翼佈局是玉伯大大提出來的,始於淘寶UED
與聖盃佈局相似,雙飛翼佈局也可以實現左右寬度跨度固定,中間自適應。
雙飛翼佈局在解決中間盒子位置是給中間盒子添加一個父盒子並且設置margin屬性來露出和兩側盒子重疊的區域,其他實現方法與聖盃佈局相同。

代碼

<div class="wrap">
    <div class="center">
        <div class="son">中間內容</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
.wrap>div {
    float: left;
    min-height: 300px;
}

.left {
    width: 300px;
    background-color: tomato;
    margin-left: -100%;
}

.right {
    width: 400px;
    background-color: pink;
    margin-left: -400px;
}

.center {
    width: 100%;
    background-color: skyblue;
}

.son {
    margin: 0 400px 0 300px;
}

等高佈局

等高佈局是指子元素在父元素中高度相等的佈局方式。


方法一 內外間距相抵消

該方法使用margin-bottom和padding-bottom一個設置較大正值,另一個設置相同負值,相互抵消實現視覺等高。使用該方法必須給父元素設置overflow:hidden;

代碼


<div class="wrap">
    <div class="left">left盒子</div>
    <div class="center">center盒子</div>
    <div class="right">right盒子</div>
</div>
.wrap {
    width: 1000px;
    margin: 0 auto;
    overflow: hidden;
}

.wrap div {
    float: left;
    min-height: 200px;
}

.left {
    width: 200px;
    background-color: tomato;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}

.center {
    width: 500px;
    background-color: yellow;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}

.right {
    width: 300px;
    background-color: violet;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}

方法二 利用內容撐開父元素的特點實現等高

代碼

<div class="wrap">
    <!-- col1、col2、col3他們負責背景 -->
    <div class="col1">
        <div class="col2">
            <div class="col3">
                <div class="left">left盒子</div>
                <div class="center">center盒子</div>
                <div class="right">right盒子</div>
            </div>
        </div>
    </div>
</div>
.wrap {
    width: 1000px;
    margin: 0 auto;
    overflow: hidden;
}

.col1 {
    /* 負責第一列的背景顏色 */
    background-color: tomato;
}

.col2 {
    /* 負責第二列的背景顏色 */
    background-color: pink;
    /* 露出第一列的背景顏色 */
    position: relative;
    left: 200px;
}

.col3 {
    /* 負責第三列的背景顏色 */
    background-color: yellow;
    /* 露出第二列的背景顏色 */
    position: relative;
    left: 500px;
}

.left {
    float: left;
    width: 200px;
    min-height: 200px;
    margin-left: -700px;
}

.center {
    float: left;
    width: 500px;
    min-height: 200px;
    margin-left: -500px;
}

.right {
    float: left;
    width: 300px;
    min-height: 200px;
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章