常用兩欄佈局和三欄佈局

看風景就發表於2016-03-08

兩欄自適應佈局

1.左欄定寬，右欄自適應

1.左側absolute或float，定寬，右側使用padding-left或者margin-left
2.左側float，定寬，右側BFC(overflow:hidden或display:table-cell)

3.左側absolute，右側marign-left
<div class="left"></div>
<div class="right"></div>
.left{position:absolute;width:200px;}
.right{margin-left:200px;}
4.flex
<div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
</div>
.wrap{display:flex}
.left{width:200px}
.right{flex:1}

2.右欄定寬，左欄自適應

1.右欄float定寬,左側margin-right

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

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

2.左欄先渲染，寬度100%，兩欄左浮動，負margin拉回上面

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

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

3.右側float定寬，左側BFC

<div class="right"></div>
<div class="left"></div>
.right{float:right;width:200px;}
.left{display:table-cell;width:2000px;*display:inline-block;*width:auto;}

4.右側absolute，左側margin-right

<div class="right"></div>
<div class="left"></div>
.right{position:absolute;width:200px;}
.left{margin-left:200px;}

5.flex

<div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
</div>
.wrap{display:flex}
.left{width:200px}
.right{flex:1}

3.左右兩欄都都自適應

左側float，不定寬，右側BFC

 

三欄自適應佈局

兩端固定，中間自適應

1.左右浮動(左右文字環繞，配合左右margin，文字強制換行，勉強實現中間自適應)

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

.left{float:left;width:200px}
.right{float:right;width:200px}
.mid{margin-left:$leftWidth;margin-right:$rightWidth;word-wrap:break-word}

2.左右浮動，中間BFC(利用左右文字環繞和BFC與float元素不重疊的特性)

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

.left{float:left;width:200px}
.right{float:right;width:200px}
.mid{
    display:table-cell;
    width:2000px;/*table-cell根據內容設定寬度，要預先設定寬度撐開*/
    *display:inline-block;/*ie6-7觸發hasLayout實現自適應*/
    *width: auto;      
}

3.兩側absolute，中間用左右margin撐開

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

.left{position:absolute;width:200px;}
.right{positon:absoulte;width:300px;}
.center{margin-left:200px;margin-right:300px;}

4.flex佈局

<div class="wrap">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
<style>
    .wrap{display:flex}
    .left{width:200px;}
    .right{width:200px;}
    .center{flex:1}
</style>

5.雙飛翼(三列浮動，內容居上，寬度100%，內部元素左右margin留空，left元素負margin 100%拉倒最左端，right元素負margin寬度拉到右端)

<div class="wrap">
    <div class="center">
        <div class="center_in"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>

.center,.left,.right{float:left}
.center{width:100%}
.center_in{margin-left:$left;margin-right:$right;}
.left{width:$left;margin-left:-100%}
.right{width:$right;margin-left:-$right;}

6.聖盃佈局(內容優先)

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

.wrap{padding-left:$left;padding-right:$right;}
.center,.left,.right{float:left;}
.center{width:100%;}
.left{width:$left;margin-left:-100%;position:relative;right:$left;}
.right{width:$right;margin-right:-$right;}

中間固定，兩端自適應

1.百分比+負margin

<div class="left">
    <div class="left-inner"></div>
</div>
<div class="mid">
</div>
<div class="right">
    <div class="right-inner"></div>
</div>

$halfMidWidth: $midWidth/2+1

.mid{width:$midWidth;float:left}
.left,.right{float:left;width:50%;margin-left:-$halfMidWidth}
.left-inner{margin-left:$halfMidWidth}
.right-inner{margin-left:$halfMidWidth}

2.flex佈局

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

.wrap{display:flex}
.left,.right{flex:1;}
.center{width:600px;}

 

相關文章