日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > CSS >内容正文

CSS

八十八、CSS两列三列的布局方式

發布時間：2024/10/8 CSS 59 豆豆
生活随笔 收集整理的這篇文章主要介紹了 八十八、CSS两列三列的布局方式 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

@Author：Runsen

2020/11/30、 周一、今天又是奮斗的一天。

文章目錄

  • 兩列布局
    • 左邊定寬 ，右邊自適應
    • 彈性布局，flex實現
    • 表格方式
  • 三列布局
    • 左邊左浮 右邊浮動 中間定寬
    • Flex 布局

兩列布局

左邊定寬 ，右邊自適應

想到的就是 float + margin 來實現兩列布局，首先實現左欄定寬，主內容自適應的兩欄布局。

float + margin 和absolute + margin 方式完全一樣。

實現思路：

1.先設置左邊的寬度，讓盒子左浮動；
2.設置右邊的盒子，margin-left: 左邊盒子的寬度。

<head><style>#left {/* 定寬 */width: 400px;height: 300px;background-color: #c9394a;/* 當前元素脫離文檔流 */float: left;/* 也可以用 position: absolute; */}#right {background-color: #cccccc;margin-left: 400px;height: 300px;}</style> </head> <body><div id="left"></div><div id="right"></div> </body>

但是網上說定寬元素浮動與自適應浮動元素不浮動存在兼容的問題。

彈性布局，flex實現

flex布局實現關鍵點解析

  • 父元素設置display:flex;和justify-content:space-bettween;(兩端對齊)
  • 父元素根據需要設置align-item:center;以實現垂直居中
  • 圖片固寬元素不需要特殊設置，寬高即可
  • 流體文案設置flex:1;自動分配剩余空間。

flex布局本來就是設計來自適應的，只需要用上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 {/* 表格的單元格的寬度會自動分配 */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>

三列布局

左邊左浮 右邊浮動 中間定寬

左邊左浮 右邊浮動 中間定寬也就是流體布局

<!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>

左右模塊各自向左右浮動，并設置中間模塊的 margin 值使中間模塊寬度自適應。

缺點就是主要內容無法最先加載，當頁面內容較多時會影響用戶體驗。

Flex 布局

Flex 布局中的flex: 1就是自定義布局。下面代碼是左右固定，中間自適應

.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>

總結

以上是生活随笔為你收集整理的八十八、CSS两列三列的布局方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。