css常見的各種布局上（兩列布局）

DTeam 發(fā)布于2019-04-22 16:12 / 2301人閱讀

1.常見的兩列布局

1.1左邊固定，右邊自適應(yīng)，左邊寬度已知，右邊默認占滿整行，使用left 左浮動，右邊不浮動，設(shè)置margin-left:左側(cè)寬度

 style 
 .box{
 overflow: hidden;
 height: 500px;
 background-color: bisque;
 .box .box-left {
 margin-left: 10px;
 width: 200px;
 min-height: 100%;
 float: left;
 background-color: pink;
 .box .box-right {
 margin-left: 220px;
 margin-right: 10px;
 height: 100%;
 background-color: green;
 header,footer {
 height: 75px;
 background-color: aqua;
 /style 
 div 
 div 
 /div 
 div 
 1shishsihsishsihi是不變的沙發(fā)電視柜很多水果和客戶的感慨的沙發(fā)電視柜很多水果和客戶的感慨大蘇打撒郭德綱你只是 第三個大概了解斯大林經(jīng)過拉絲幾個垃圾
 /div 
 /div

1.2右側(cè)固定，寬度已知，左側(cè)自適應(yīng)，記住固定的區(qū)域一定要放自適應(yīng)區(qū)域的右邊，

.box{
 height: 500px;
 background-color: bisque;
 position: relative;
 .box .box-right {
 float: right;
 width: 200px;
 min-height: 100%;
 margin-right: 10px;
 background-color: pink;
 .box .box-left {
 margin-left: 10px;
 margin-right: 220px;
 height: 100%;
 background-color: green;
 header,footer {
 height: 75px;
 background-color: aqua;
 div 
 div 
 /div 
 div 
 1shishsihsishsihi是不變的沙發(fā)電視柜很多水果和客1111111111111111111111戶的感慨的沙發(fā)電視柜很多水果和客戶的感慨大蘇打撒郭德綱你只是 
 第三個大概了解斯大林經(jīng)過拉絲幾個垃圾
 /div 
 /div

單列固定都是比較簡單的還有嵌套一層div方式，還有彈性布局方式，還有g(shù)rid布局，都能實現(xiàn)單側(cè)固定

1.3 嵌套一層div ,左側(cè)固定，右側(cè)自適應(yīng)布局，使用雙浮動，右側(cè)自適應(yīng)先寫入，左側(cè)使用margin-left:-100%

不嵌套一層div，右側(cè)直接使用margin-left:左側(cè)寬度也是可以的(這個代碼就不寫了，和第一個差不多)

 style 
 .box{
 height: 500px;
 background-color: bisque;
 position: relative;
 overflow: hidden;
 .box .box-right {
 float: left;
 margin-left: -100%;
 width: 200px;
 min-height: 100%;
 background-color: pink;
 .box .box-left {
 float: left;
 width: 100%;
 height: 100%;
 background-color: green;
 .box .box-left .son {
 margin-left: 210px;
 header,footer {
 height: 75px;
 background-color: aqua;
 /style 
 body 
 header 
 /header 
 div 
 div 
 div 
 1shishsihsishsihi是不變的沙發(fā)電視柜很多水果和客1111111111111111111111戶的感慨的沙發(fā)電視柜很多水果和客戶的感慨大蘇打撒郭德綱你只是 
 第三個大概了解斯大林經(jīng)過拉絲幾個垃圾
 /div 
 /div 
 div 
 /div 
 /div 
 footer 
 /footer 
 /body

1.4 t彈性布局

 style 
 .box{
 height: 500px;
 background-color: bisque;
 position: relative;
 display: flex;
 .box .box-left {
 margin-left: 10px;
 flex: 0 0 200px; /* 參數(shù)分別是 放大，縮小 初始大小 */
 background-color: pink;
 .box .box-right {
 margin-left: 10px;
 margin-right: 10px;
 height: 100%;
 background-color: green;
 header,footer {
 height: 75px;
 background-color: aqua;
 /style 
 body 
 header 
 /header 
 div 
 div 
 /div 
 div 
 1shishsihsishsihi是不變的沙發(fā)電視柜很多水果和客1111111111111111111111戶的感慨的沙發(fā)電視柜很多水果和客戶的感慨
 大蘇打撒郭德綱你只是 第三個大概了解斯大林經(jīng)過拉絲幾個垃圾
 /div 
 /div 
 footer 
 /footer 
 /body

1.5 grid布局,grid相對于flex的話屬于二維布局，可以定義行數(shù)，定義列數(shù)，定義行高列高，寬度也可以自適應(yīng)，設(shè)置父容器的display:grid。grid 有很大的兼容性問題。慎用

使用grid 相當于設(shè)置行數(shù)為1，列數(shù)為2的grid布局，使用grid可以很容易實現(xiàn)九宮格布局

 style 
 .box{
 height: 500px;
 background-color: bisque;
 position: relative;
 display: grid;
 padding: 0 10px;
 grid-template-rows: 1fr;
 grid-template-columns: 200px auto;
 grid-gap: 10px;
 .box .box-left {
 background-color: pink;
 .box .box-right {
 background-color: green;
 header,footer {
 height: 75px;
 background-color: aqua;
 /style 
 body 
 header 
 /header 
 div 
 div 
 /div 
 div 
 1shishsihsishsihi是不變的沙發(fā)電視柜很多水果和客1111111111111111111111戶的感慨的沙發(fā)電視柜很多水果和客戶的感慨
 大蘇打撒郭德綱你只是 第三個大概了解斯大林經(jīng)過拉絲幾個垃圾
 /div 
 /div 
 footer 
 /footer 
 /body

使用grid實現(xiàn)9宮格布局

 style 
 .box{
 height: 500px;
 background-color: bisque;
 position: relative;
 display: grid;
 padding: 0 10px;
 grid-template-rows: 1fr 1fr 1fr;
 grid-template-columns: 1fr 1fr 1fr;
 grid-gap: 10px;
 .box .box-left {
 background-color: pink;
 .box .box-right {
 background-color: green;
 header,footer {
 height: 75px;
 background-color: aqua;
 /style 
 body 
 header 
 /header 
 div 
 div 
 /div 
 div 
 1shishsihsishsihi是不變的沙發(fā)電視柜很多水果和客1111111111111111111111戶的感慨的沙發(fā)電視柜很多水果和客戶的感慨
 大蘇打撒郭德綱你只是 第三個大概了解斯大林經(jīng)過拉絲幾個垃圾
 /div 
 div 
 /div 
 div 
 1shishsihsishsihi是不變的沙發(fā)電視柜很多水果和客1111111111111111111111戶的感慨的沙發(fā)電視柜很多水果和客戶的感慨
 大蘇打撒郭德綱你只是 第三個大概了解斯大林經(jīng)過拉絲幾個垃圾
 /div 
 div 
 /div 
 div 
 1shishsihsishsihi是不變的沙發(fā)電視柜很多水果和客1111111111111111111111戶的感慨的沙發(fā)電視柜很多水果和客戶的感慨
 大蘇打撒郭德綱你只是 第三個大概了解斯大林經(jīng)過拉絲幾個垃圾
 /div 
 div 
 /div 
 div 
 1shishsihsishsihi是不變的沙發(fā)電視柜很多水果和客1111111111111111111111戶的感慨的沙發(fā)電視柜很多水果和客戶的感慨
 大蘇打撒郭德綱你只是 第三個大概了解斯大林經(jīng)過拉絲幾個垃圾
 /div 
 div 
 /div 
 /div 
 footer 
 /footer 
 /body

View Code

1.6 使用定位實現(xiàn)左側(cè)固定右側(cè)自適應(yīng)布局，

1.6.1使用相對定位，該布局，左側(cè)固定div 的高度已知，

 style 
 .box{
 height: 500px;
 background-color: bisque;
 position: relative;
 .box .box-left {
 margin-left: 10px;
 width: 200px;
 height: 400px;
 background-color: pink;
 .box .box-right {
 position: relative;
 top: -100%;
 margin-left: 220px;
 height: 100%;
 background-color: green;
 margin-right: 10px;
 header,footer {
 height: 75px;
 background-color: aqua;
 /style 
 body 
 header 
 /header 
 div 
 div 
 /div 
 div 
 1shishsihsishsihi是不變的沙發(fā)電視柜很多水果和客1111111111111111111111戶的感慨的沙發(fā)電視柜很多水果和客戶的感慨
 大蘇打撒郭德綱你只是 第三個大概了解斯大林經(jīng)過拉絲幾個垃圾
 /div 
 /div 
 footer 
 /footer 
 /body

View Code

1.6.2 使用相對定位實現(xiàn)左側(cè)固定，右側(cè)自適應(yīng)，div高度未知，將自適應(yīng)的模塊放前面，固定寬度div設(shè)置top:-100%

 style 
 .box{
 height: 500px;
 background-color: bisque;
 position: relative;
 .box .box-left {
 position: relative;
 top: -100%;
 margin-left: 10px;
 width: 200px;
 height: 400px;
 background-color: pink;
 .box .box-right {
 margin-left: 220px;
 height: 100%;
 background-color: green;
 margin-right: 10px;
 header,footer {
 height: 75px;
 background-color: aqua;
 /style 
 body 
 header 
 /header 
 div 
 div 
 1shishsihsishsihi是不變的沙發(fā)電視柜很多水果和客1111111111111111111111戶的感慨的沙發(fā)電視柜很多水果和客戶的感慨
 大蘇打撒郭德綱你只是 第三個大概了解斯大林經(jīng)過拉絲幾個垃圾
 /div 
 div 
 /div 
 /div 
 footer 
 /footer 
 /body

View Code

1.6.3 使用絕對定位，兩個模塊都使用絕對定位，可以不使用浮動

 style 
 .box{
 height: 500px;
 background-color: bisque;
 position: relative;
 .box .box-left {
 position: absolute;
 margin-left: 10px;
 width: 200px;
 height: 400px;
 background-color: pink;
 .box .box-right {
 position: absolute;
 margin-left: 220px;
 height: 100%;
 background-color: green;
 margin-right: 10px;
 header,footer {
 height: 75px;
 background-color: aqua;
 /style 
 body 
 header 
 /header 
 div 
 div 
 1shishsihsishsihi是不變的沙發(fā)電視柜很多水果和客1111111111111111111111戶的感慨的沙發(fā)電視柜很多水果和客戶的感慨
 大蘇打撒郭德綱你只是 第三個大概了解斯大林經(jīng)過拉絲幾個垃圾
 /div 
 div 
 /div 
 /div 
 footer 
 /footer 
 /body

View Code

1.6.4 左側(cè)先放入固定模塊，設(shè)置定位為絕對定位，右側(cè)模塊無論使用什么定位，只要margin-left：左側(cè)寬度，

都能實現(xiàn)這個布局

 style 
 .box{
 height: 500px;
 background-color: bisque;
 position: relative;
 .box .box-left {
 position: absolute;
 margin-left: 10px;
 width: 200px;
 height: 400px;
 background-color: pink;
 .box .box-right {
 margin-left: 220px;
 height: 100%;
 background-color: green;
 margin-right: 10px;
 header,footer {
 height: 75px;
 background-color: aqua;
 /style 
 body 
 header 
 /header 
 div 
 div 
 /div 
 div 
 1shishsihsishsihi是不變的沙發(fā)電視柜很多水果和客1111111111111111111111戶的感慨的沙發(fā)電視柜很多水果和客戶的感慨
 大蘇打撒郭德綱你只是 第三個大概了解斯大林經(jīng)過拉絲幾個垃圾
 /div 
 /div 
 footer 
 /footer 
 /body

View Code

上面所以布局的實現(xiàn)圖

總結(jié)，左側(cè)固定右側(cè)自適應(yīng)布局

1、不使用定位，左側(cè)固定，浮動，右側(cè)，設(shè)置margin-left：左側(cè)寬度

2、不適用定位，左側(cè)固定，浮動，右側(cè)也浮動，，右側(cè)模塊一定要寫在左側(cè)模塊之前，左側(cè)使用margin-left:-100%

2.1右側(cè)使用margin:左側(cè)寬度，

2.2左側(cè)設(shè)置寬度100%,嵌套一層div,設(shè)置margin:左側(cè)寬度（這種方式有點多余，在兩列布局上）

3、使用定位，父元素設(shè)置display:relative(為啥不使用absolute，子元素要是設(shè)置也是absolute，

那么都不知道跑什么地方去了)

3.1 左元素不設(shè)置定位，右側(cè)元素設(shè)置相對定位display:relative;則，有點設(shè)置top：左側(cè)高度，margin：左側(cè)寬度

3.2 左側(cè)寬度不定，則將左側(cè)和右側(cè)元素都設(shè)置為相對定位，右側(cè)元素先放入頁面，左側(cè)設(shè)置top:-100%.右側(cè)設(shè)置

margin-left：左側(cè)寬度（3.1的左側(cè)高度要已知，而這個左側(cè)高度可以不已知）

3.2 左側(cè)元素為絕對定義，則右側(cè)元素直接設(shè)置margin-left:左側(cè)寬度，（left，margin-left,對于自適應(yīng)的

寬度，margin會使寬度變窄，而left 是不會的，如果要是用left:左側(cè)寬度，那么一定要設(shè)置margin-right:左側(cè)寬度）

4、使用flex布局，單列布局，設(shè)置父元素display:flex;左側(cè)元素的flex為;:0 0 width;右側(cè)元素不用設(shè)置

5、使用grid布局，grid布局是二維布局，設(shè)置為1行，1列，第一列寬度為定位寬度，第二列寬度為auto,子元素不用設(shè)置

上面基本上覆蓋了所以的左側(cè)固定，右側(cè)自適吟的布局，第一種最簡單， 4 5 有一定兼容性問題，flex常用語移動端。

如果您還有更好的方法，請給我留言。

GPU云服務(wù)器云服務(wù)器 java中各種布局 css布局 css布局教程學習css布局

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/791.html

發(fā)表評論

登陸后可評論

0條評論

DTeam

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow2.4

閱讀 1691·2023-04-25 20:36
女朋友嫌我拍的照片有霧，連夜用OpenCV寫出??去霧算法??逃過一劫（收藏保命）

閱讀 2149·2021-09-02 15:11
HostHatch：新上新加坡KVM VPS，NVMe SSD硬盤/1Gbps端口，$20/年起

閱讀 1245·2021-08-27 13:13
Animation 實現(xiàn)輪播圖

閱讀 2687·2019-08-30 15:52
字體渲染—￥還是?？

閱讀 5306·2019-08-29 17:13
CSS3 垂直居中詳解

閱讀 1038·2019-08-29 11:09
call() 與 apply() 和 bind()

閱讀 1523·2019-08-26 11:51
小程序內(nèi)用戶帳號登錄規(guī)范調(diào)整和優(yōu)化建議

閱讀 886·2019-08-26 10:56

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

css常見的各種布局上（兩列布局）

相關(guān)文章