整理了一些布局的实现方案,算是笔记,发到博客上也希望能帮助到一些有需要的人。
注:文中列出的只是核心代码,在实际应用中可能还需加入”width”/“height”/“bancground-color”等css样式。
居中布局
元素水平居中
之后的布局讲解将以下面的这段代码为模板
1 2 3
| <div class="parent"> <div class="child">DEMO</div> </div>
|
inline-block + text-align
1 2 3 4 5 6 7 8 9 10 11
| .child{ display: inline-block; text-align: left; } .parent{ text-align: center; }
|
table + margin
1 2 3 4 5 6 7 8
| .child{ display: table; margin: 0 auto; }
|
1 2 3 4 5 6 7 8 9 10 11 12
| .parent{ position:relative; } .child{ position: absolute; left: 50%; transform: translateX(-50%); }
|
flex + justify-content
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| .parent{ display: flex; justify-content: center; }
.parent{ display: flex; } .child{ margin: 0 auto; }
|
元素的垂直居中
table-cell + vertical-align
1 2 3 4 5 6 7 8
| .parent{ display: table-cell; vertical-align: middle; }
|
1 2 3 4 5 6 7 8 9 10 11 12
| .parent{ position: relative; } .child{ position: absolute; top: 50%; transform: translateY(-50%); }
|
flex + align-items
1 2 3 4 5 6 7 8
| .parent{ display: flex; align-items: center; }
|
元素的水平垂直居中(元素宽高都未知)
inline-block + text-align + table-cell + vertical-align
1 2 3 4 5 6 7 8 9 10 11 12
| .parent{ text-align: center; display: table-cell; vertical-align: middle; } .child{ display: inline-block; }
|
1 2 3 4 5 6 7 8 9 10 11 12 13
| .parent{ position: relative; } .child{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) }
|
flex + justify-content + align-items
1 2 3 4 5 6 7 8 9
| .parent{ display: flex; justify-content: center; align-items:center; }
|
多列布局
一列定宽一列自适应布局
之后的布局讲解将以下面的这段代码为模板,如模版有变动将单独列出。
1 2 3 4 5 6 7 8 9
| <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>
|
float + margin
1 2 3 4 5 6 7 8 9 10 11
| .left{ float: left; width: 100px; } .right{ margin-left: 120px; }
|
改进上述方法,解决兼容性问题
此结构只适用于float + margin + (fix)方法
1 2 3 4 5 6 7 8 9 10 11
| <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right-fix"> <div class="right"> <p>right</p> <p>right</p> </div> </div> </div>
|
float + margin + (fix)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| .left{ float: left; width: 100px; position: relative; } .right-fix{ float: right; width: 100%; margin-left:-100px; } .right{ margin-left: 120px; }
|
float + overflow
1 2 3 4 5 6 7 8 9 10 11 12
| .left{ float: left; width: 100px; margin-right: 20px;/20px为列之间的空隙/ } .right{ overflow: hidden; }
|
table
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| .parent{ display: table; width: 100%; table-layout:fixed;/提升渲染速度,布局优先/ } .left,.right{ display: table-cell; } .left{ width: 100px; padding-right: 20px;/20px为列之间的空隙,table-cell无法设置margin,所以设置padding/ }
|
flex
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| .parent{ display: flex; } .left{ width: 100px; margin-right: 20px;/20px为列之间的空隙/ } .right{ flex: 1; }
|
两列定宽一列自适应布局
此结构只适用于下面的例子
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <div class="parent"> <div class="left"> <p>left</p> </div> <div class="center"> <p>center</p> </div> <div class="right-fix"> <div class="right"> <p>right</p> <p>right</p> </div> </div> </div>
|
float + overflow
1 2 3 4 5 6 7 8
| .left,.center{ float: left; width: 100px; margin-right: 20px;/20px为列之间的空隙/ } .right{ overflow: hidden; }
|
一列不定宽一列自适应布局
之后的布局讲解将以下面的这段代码为模板,如模板有变动将单独列出
1 2 3 4 5 6 7 8 9
| <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>
|
float + overflow
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| .left,.center{ float: left; margin-right: 20px; } .right{ overflow: hidden; } .left p{ width:200px; }
|
table
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| .parent{ display: table; width: 100%; } .left,.right{ display: table-cell; } .left{ width: 0.1%; padding-right: 20px; } .left p{ width: 200px; }
|
flex
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| .parent{ display: flex; } .left{ margin-right: 20px;/20px为列之间的空隙/ } .right{ flex: 1; } .left p{ width: 100px;/根据内容决定/ }
|
两列不定宽加一列自适应
此结构只适用于下面的例子
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <div class="parent"> <div class="left"> <p>left</p> </div> <div class="center"> <p>center</p> </div> <div class="right-fix"> <div class="right"> <p>right</p> <p>right</p> </div> </div> </div>
|
float + overflow
1 2 3 4 5 6 7 8
| .left,.center{ float: left; width: 100px; margin-right: 20px; } .right{ overflow: hidden; }
|
等分布局
之后的布局讲解将以下面的这段代码为模板,如模板有变动将单独列出
1 2 3 4 5 6
| <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>
|
float
1 2 3 4 5 6 7 8 9 10 11 12 13
| .parent{ margin-left: -20px; } .column{ float: left; width: 25%; padding-left: 20px; box-sizing: border-box; }
|
table
此模板只适用于table布局
1 2 3 4 5 6 7 8
| <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>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| .parent-fix{ margin-left: -20px; } .parent{ display: table; width:100%; table-layout:fixed; } .column{ display: table-cell; padding-left: 20px; }
|
flex
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| .parent{ display: flex; } .column{ flex: 1; } .column+.column{
margin-left: 20px; }
|
等高布局
之后的布局讲解将以下面的这段代码为模板,如模板有变动将单独列出
1 2 3 4 5 6 7 8 9
| <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>
|
table
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| .parent{ display: table; width: 100%; table-layout:fixed; } .left,.right{ display: table-cell; } .left{ width: 100px; padding-right: 20px; }
|
flex(flex布局默认等高)
1 2 3 4 5 6 7 8 9 10 11 12
| .parent{ display: flex; } .left{ margin-right: 20px; } .right{ flex: 1; } .left p{ width: 100px; }
|
float
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| .parent{ overflow: hidden; } .left,.right{ padding-bottom: 9999px; margin-bottom: -9999px; } .left{ float: left; width: 100px; margin-right; } .right{ overflow: hidden; }
|
全屏布局
之后的布局讲解将以下面的这段代码为模板,如模板有变动将单独列出
1 2 3 4 5 6
| <div id="parent"> <div id="top"></div> <div id="left"></div> <div id="right"></div> <div id="bottom"></div> </div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| html,body,#parent{ height:100%; overflow:hidden; } .top{ position:absolute;top:0;left:0;right:0;height:100px; } .bottom{ position:absolute;left:0;right:0;bottom:0;height:50px; } .left{ position:absolute;left:0;top:100px;bottom:50px;width:200px; } .right{ position:absolute;overflow:auto;left:200px;top:100px;bottom:50px; }
|
flex
此模板只适用于该案例
1 2 3 4 5 6 7 8
| <div class="parent"> <div class="top"></div> <div class="middle"> <div class="left"></div> <div class="right"></div> </div> <div class="bottom"></div> </div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| html,body,.parent{ height:100%; overflow:hidden; margin:0; } .parent{ display:flex; flex-direction:column; } .top{ height:100px; background-color:black; } .bottom{ height:50px; } .middle{ flex-grow:1; display:flex; } .left{ width:200px; } .right{ flex-grow:1; overflow:auto; }
|
全适应布局
position无法实现全适应布局,只能用flex或grid实现,这里只介绍flex实现方法。
此模板只适用于该案例
1 2 3 4 5 6 7 8
| <div class="parent"> <div class="top"></div> <div class="middle"> <div class="left"></div> <div class="right"></div> </div> <div class="bottom"></div> </div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| html,body,.parent{ height:100%; overflow:hidden; } .parent{ display:flex; flex-direction:column; } .middle{ flex-grow:1; display:flex; } .right{ flex-grow:1; overflow:auto; }
|