八十八、CSS两列三列的布局方式
生活随笔
收集整理的這篇文章主要介紹了
八十八、CSS两列三列的布局方式
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
@Author：Runsen
| 2020/11/30、 周一、今天又是奮斗的一天。 |
文章目錄
- 兩列布局
- 左邊定寬 ，右邊自適應(yīng)
- 彈性布局，flex實(shí)現(xiàn)
- 表格方式
- 三列布局
- 左邊左浮 右邊浮動(dòng) 中間定寬
- Flex 布局
兩列布局
左邊定寬 ，右邊自適應(yīng)
想到的就是 float + margin 來實(shí)現(xiàn)兩列布局，首先實(shí)現(xiàn)左欄定寬，主內(nèi)容自適應(yīng)的兩欄布局。
float + margin 和absolute + margin 方式完全一樣。
實(shí)現(xiàn)思路：
1.先設(shè)置左邊的寬度，讓盒子左浮動(dòng)；
2.設(shè)置右邊的盒子，margin-left: 左邊盒子的寬度。
但是網(wǎng)上說定寬元素浮動(dòng)與自適應(yīng)浮動(dòng)元素不浮動(dòng)存在兼容的問題。
彈性布局，flex實(shí)現(xiàn)
flex布局實(shí)現(xiàn)關(guān)鍵點(diǎn)解析
- 父元素設(shè)置display:flex;和justify-content:space-bettween;(兩端對(duì)齊)
- 父元素根據(jù)需要設(shè)置align-item:center;以實(shí)現(xiàn)垂直居中
- 圖片固寬元素不需要特殊設(shè)置，寬高即可
- 流體文案設(shè)置flex:1;自動(dòng)分配剩余空間。
flex布局本來就是設(shè)計(jì)來自適應(yīng)的，只需要用上flex: 1;，就能讓right分到parent的寬度減去left的寬度。
<head><style>#parent {display: flex;/* justify-content: center;align-items: center; */}#left {width: 200px;height: 100px;background: #245524;}#right {flex: 1;height: 100px;background: #785778;}</style> </head><body><div id="parent"><div id="left"></div><div id="right"></div></div></body>表格方式
<head><style>#parent {/* 表格的單元格的寬度會(huì)自動(dòng)分配 */display: table;/* table-layout: fixed; */width: 100%;}#left {/* 定寬 */width: 400px;height: 300px;display: table-cell;background-color: #c9394a;}#right {height: 300px;display: table-cell;background-color: #cccccc;}</style> </head><body><div id="parent"><div id="left"></div><div id="right"></div></div> </body>三列布局
左邊左浮 右邊浮動(dòng) 中間定寬
左邊左浮 右邊浮動(dòng) 中間定寬也就是流體布局
<!DOCTYPE html> <html lang="en"> <head><style>.left {float: left;height: 200px;width: 100px;background-color: red;}.right {width: 200px;height: 200px;background-color: blue;float: right;}.main {margin-left: 120px;margin-right: 220px;height: 200px;background-color: green;}</style> </head> <body><div class="container"><div class="left"></div><div class="right"></div><div class="main"></div></div> </body> </html>左右模塊各自向左右浮動(dòng)，并設(shè)置中間模塊的 margin 值使中間模塊寬度自適應(yīng)。
缺點(diǎn)就是主要內(nèi)容無法最先加載，當(dāng)頁面內(nèi)容較多時(shí)會(huì)影響用戶體驗(yàn)。
Flex 布局
Flex 布局中的flex: 1就是自定義布局。下面代碼是左右固定，中間自適應(yīng)
.container{display: flex;height: 300px;}.left{width: 100px;background-color: red;}.middle{flex: 1;background-color: green;}.right{width: 100px;background-color: blue;}<div class="container"><div class="left"></div><div class="middle"></div><div class="right"></div> </div>總結(jié)
以上是生活随笔為你收集整理的八十八、CSS两列三列的布局方式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 笔记本U孔对U盘没有反应怎么办 笔记本U
- 下一篇： 设置css3动画的顺序,CSS3 “瓷砖