摘要:無名布局自己瞎搞的,簡單的絕對定位即可解決問題,為啥還要搞什么圣杯和雙飛翼如果你覺得此文對你有一定的幫助,可以點擊下方的喜歡收藏備用
我們在日常開發(fā)中經(jīng)常遇到布局問題,下面羅列幾種常用的css布局方案
話不多說,上代碼!
居中布局以下所有demo的源碼
github:https://github.com/zwwill/css-layout/tree/master/demo-1
鏈接: http://pan.baidu.com/s/1cHBH3g
密碼:obkb
1、水平居中 a) inline-block + text-align以下居中布局均以不定寬為前提,定寬情況包含其中
.parent{ text-align: center; } .child{ display: inline-block; }
tips:此方案兼容性較好,可兼容至IE8,對于IE567并不支持inline-block,需要使用css hack進行兼容
b) table + margin.child{ display: table; margin: 0 auto; }
tips:此方案兼容至IE8,可以使用代替css寫法,兼容性良好
.parent{ position: relative; height:1.5em; } .child{ position: absolute; left: 50%; transform: translateX(-50%); }
tips:此方案兼容至IE9,因為transform兼容性限制,如果.child為定寬元素,可以使用以下寫法,兼容性極佳
.parent{ position: relative; height:1.5em; } .child{ position: absolute; width:100px; left: 50%; margin-left:-50px; }d) flex + justify-content
.parent{ display: flex; justify-content: center; } .child{ margin: 0 auto; }
tips:flex是一個強大的css,生而為布局,它可以輕松的滿足各種居中、對其、平分的布局要求,但由于現(xiàn)瀏覽器兼容性問題,此方案很少被使用,但是值得期待瀏覽器兼容性良好但那一天!
2、垂直 a) table-cell + vertial-align.parent{ display: table-cell; vertical-align: middle; }
tips:可替換成布局,兼容性良好
.parent{ position: relative; } .child{ position: absolute; top: 50%; transform: translateY(-50%); }
tips:存在css3兼容問題,定寬兼容性良好
c) flex + align-items.parent{ display: flex; align-items: center; }
tips:高版本瀏覽器兼容,低版本不適用
3、水平垂直a) inline-block + table-cell + text-align + vertical-align
.parent{ text-align: center; display: table-cell; vertical-align: middle; } .child{ display: inline-block; }
tips:兼容至IE8
b) absolute + transform
.parent{ position: relative; } .child{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
tips:兼容性稍差,兼容IE10以上
c) flex
.parent{ display: flex; justify-content: center; align-items: center; }
tips:兼容差
多列布局 1、一列定寬,一列自適應(yīng)a) float + margin
.left{ float: left; width: 100px; } .right{ margin-left: 120px; }
tips:此方案對于定寬布局比較好,不定寬布局推薦方法b
b) float + overflow
.left{ float: left; width: 100px; margin-right: 20px; } .right{ overflow: hidden; }
tips:個人常用寫法,此方案不管是多列定寬或是不定寬,都可以完美實現(xiàn),同時可以實現(xiàn)登高布局
c) table
.parent{ display: table; width: 100%; table-layout: fixed; } .left,.right{ display: table-cell; } .left{ width: 100px; padding-right: 20px; }
d) flex
.parent{ display: flex; } .left{ width: 100px; padding-right: 20px; } .right{ flex: 1; }2、多列定寬,一列自適應(yīng)
a) float + overflow
.left,.center{ float: left; width: 100px; margin-right: 20px; } .right{ overflow: hidden; }
b) table
.parent{ display: table; width: 100%; table-layout: fixed; } .left,.center,.right{ display: table-cell; } .right{ width: 100px; padding-right: 20px; }
c) flex
.parent{ display: flex; } .left,.center{ width: 100px; padding-right: 20px; } .right{ flex: 1; }3、一列不定寬,一列自適應(yīng)
a) float + overflow
.left{ float: left; margin-right: 20px; } .right{ overflow: hidden; } .left p{width: 200px;}
b) table
.parent{ display: table; width: 100%; } .left,.right{ display: table-cell; } .left{ width: 0.1%; padding-right: 20px; } .left p{width:200px;}
c) flex
.parent{ display: flex; } .left{ margin-right: 20px; } .right{ flex: 1; } .left p{width: 200px;}4、多列不定寬,一列自適應(yīng)
a) float + overflow
.left,.center{ float: left; margin-right: 20px; } .right{ overflow: hidden; } .left p,.center p{ width: 100px; }5、等分
a) float + margin
.parent{ margin-left: -20px; } .column{ float: left; width: 25%; padding-left: 20px; box-sizing: border-box; }
b) table + margin
.parent-fix{ margin-left: -20px; } .parent{ display: table; width:100%; table-layout: fixed; } .column{ display: table-cell; padding-left: 20px; }
c) flex
.parent{ display: flex; } .column{ flex: 1; } .column+.column{ margin-left:20px; }6、等高
a) float + overflow
.parent{ overflow: hidden; } .left,.right{ padding-bottom: 9999px; margin-bottom: -9999px; } .left{ float: left; width: 100px; } .right{ overflow: hidden; }
b) table
.parent{ display: table; width: 100%; } .left{ display:table-cell; width: 100px; margin-right: 20px; } .right{ display:table-cell; }
c) flex
.parent{ display:flex; width: 100%; } .left{ width: 100px; } .right{ flex:1; }并排等分,單排對齊靠左布局
效果圖
.main { display: flex; flex-flow: row wrap; justify-content: space-between; } .item { display: inline-block; } .empty{ height: 0; visibility: hidden; }
具體詳解請見下文
https://segmentfault.com/a/1190000011007357
圣杯布局此處僅為代碼展示,差別講解請移駕下文
【方案】圣杯布局&雙飛翼布局
【JsFiddle】
https://jsfiddle.net/zwwill/px57xzp4/
headermainleftright
.container {width: 500px; margin: 50px auto;} .wrapper {padding: 0 100px 0 100px;} .col {position: relative; float: left;} .header,.footer {height: 50px;} .main {width: 100%;height: 200px;} .left {width: 100px; height: 200px; margin-left: -100%;left: -100px;} .right {width: 100px; height: 200px; margin-left: -100px; right: -100px;} .clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden;}雙飛翼布局
ps:
“這不是一樣的圖嘛?”
“對!就是一樣的,因為是解決同一種問題的嘛。”
【JsFiddle】
https://jsfiddle.net/zwwill/5xjyeu9d/
headermainleftright
.col {float: left;} .header {height: 50px;} .main {width: 100%;} .main-wrap {margin: 0 100px 0 100px;height: 200px;} .left {width: 100px; height: 200px; margin-left: -100%;} .right {width: 100px; height: 200px; margin-left: -100px;} .footer {height: 50px;} .clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden;}無名布局
自己瞎搞的,簡單的絕對定位即可解決問題,為啥還要搞什么圣杯和雙飛翼
https://jsfiddle.net/zwwill/a...
headermainleftright
.wrapper { position: relative; } .main { margin:0 100px;} .left { position: absolute; left: 0; top: 0;} .right { position: absolute; right: 0; top: 0;}
如果你覺得此文對你有一定的幫助,可以點擊下方的【喜歡】收藏備用
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/112537.html
摘要:布局經(jīng)典問題初步整理標簽前端本文主要對布局中常見的經(jīng)典問題進行簡單說明,并提供相關(guān)解決方案的參考鏈接,涉及到三欄式布局,負,清除浮動,居中布局,響應(yīng)式設(shè)計,布局,等等。 CSS 布局經(jīng)典問題初步整理 標簽 : 前端 [TOC] 本文主要對 CSS 布局中常見的經(jīng)典問題進行簡單說明,并提供相關(guān)解決方案的參考鏈接,涉及到三欄式布局,負 margin,清除浮動,居中布局,響應(yīng)式設(shè)計,F(xiàn)l...
摘要:子容器溢出時,父容器出現(xiàn)滾動條。父容器或很顯然,子容器溢出時,被父容器截斷的情形無法和父容器自適應(yīng)于子容器共存。現(xiàn)在這個布局可以自動生成,詳見林小志的小工具圖片垂直居中。溢出子容器溢出時會變成頂對齊,原因同上。 本文在evernote里有備份。如果evernote的閱讀區(qū)域嫌窄了,那么可以把這個鏈接拖入書簽并點擊javascript:jQuery(#container).width(9...
摘要:水平居中,相當于垂直居中,相當于文本式終極居中很容易便能看出,這其實是水平居中方案以及垂直居中方案的合用,也算是把文本排版的特性都利用了個遍了。 討論前提 本文都是基于這樣的HTML結(jié)構(gòu)來進行討論的: DEMO 水平居中 inline-block:inline-block + text-align .parent{ text-align: cente...
閱讀 1336·2023-04-25 23:47
閱讀 912·2021-11-23 09:51
閱讀 4431·2021-09-26 10:17
閱讀 3706·2021-09-10 11:19
閱讀 3253·2021-09-06 15:10
閱讀 3546·2019-08-30 12:49
閱讀 2421·2019-08-29 13:20
閱讀 1730·2019-08-28 18:14