摘要:實(shí)現(xiàn)列布局,左側(cè)寬度固定,右側(cè)自適應(yīng)實(shí)現(xiàn)一根據(jù)定位,利用浮動或絕對定位,使左側(cè)的塊元素脫離常規(guī)文檔流可以與右邊塊元素并列利用浮動利用絕對定位塊級元素,默認(rèn)自動填充父元素寬度,霸占一行當(dāng)前右側(cè)塊元素寬度父元素寬度設(shè)置為左側(cè)塊元素的寬度。
HTML實(shí)現(xiàn)2列布局,左側(cè)寬度固定,右側(cè)自適應(yīng)
實(shí)現(xiàn)一:
div1div2
1)設(shè)置margin-left之前
2)設(shè)置margin-left之后
實(shí)現(xiàn)二:
div1div2
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/53417.html
摘要:實(shí)現(xiàn)列布局,左側(cè)寬度固定,右側(cè)自適應(yīng)實(shí)現(xiàn)一根據(jù)定位,利用浮動或絕對定位,使左側(cè)的塊元素脫離常規(guī)文檔流可以與右邊塊元素并列利用浮動利用絕對定位塊級元素,默認(rèn)自動填充父元素寬度,霸占一行當(dāng)前右側(cè)塊元素寬度父元素寬度設(shè)置為左側(cè)塊元素的寬度。 HTML實(shí)現(xiàn)2列布局,左側(cè)寬度固定,右側(cè)自適應(yīng) 實(shí)現(xiàn)一: body, html{padding:0; margin:0;} // 根據(jù)...
摘要:不管是左是右,反正就是一邊寬度固定,一邊寬度自適應(yīng)。博客園的很多主題也是這樣設(shè)計的,我的博客園博客也是右側(cè)固定寬度,左側(cè)自適應(yīng)屏幕的布局方式。與配合使用首先我們調(diào)整一下結(jié)構(gòu)自適應(yīng)區(qū)固定寬度區(qū)代碼這樣實(shí)現(xiàn),的實(shí)際寬度就是屏幕寬度。 我在前面有一篇文章《CSS基礎(chǔ)篇--可擴(kuò)展性的頁面布局》中介紹了如下三種布局方式:1.左右結(jié)構(gòu),左邊100%;右邊寬度固定2.左右結(jié)構(gòu),左邊固定,右邊100%...
1.常見的兩列布局 1.1左邊固定,右邊自適應(yīng),左邊寬度已知,右邊默認(rèn)占滿整行,使用left 左浮動,右邊不浮動,設(shè)置margin-left:左側(cè)寬度 style .box{ overflow: hidden; height: 500px; background-color: bisque; .box .box-left { margin-left: 10px; ...
摘要:總結(jié)一下左邊固定,右邊自適應(yīng)的兩欄布局的七種方法?;镜臉邮绞?,兩個相距左側(cè)寬基本的樣式是,兩個盒子相距左側(cè)盒子寬,右側(cè)盒子寬度自適應(yīng)。沒有清除浮動的方法,若左側(cè)盒子高于右側(cè)盒子,就會超出父容器的高度。 總結(jié)一下左邊固定,右邊自適應(yīng)的兩欄布局的七種方法。其中有老生常談的float方法,BFC方法,也有CSS3的flex布局與grid布局。并非所有的布局都會在開發(fā)中使用,但是其中也會涉及...
閱讀 3825·2023-04-25 19:07
閱讀 3575·2021-11-22 12:02
閱讀 3149·2021-10-12 10:11
閱讀 3942·2021-09-03 10:49
閱讀 2903·2019-08-30 13:21
閱讀 3017·2019-08-30 11:14
閱讀 2100·2019-08-29 15:40
閱讀 2882·2019-08-28 18:29