首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計綜合問答

CSS 實現兩欄等高:定寬左欄 + 自適應右欄(Float + Overflow 隱含 BFC)

     編輯:程式設計綜合問答

經典聖杯佈局簡化版:左欄固定寬浮動,右欄觸發 BFC 自動填滿剩餘寬度,外層 clearfix 清除浮動實現等高。

核心 CSS

.container { overflow: hidden; /* 或 clearfix */ }
.left { float: left; width: 100px; background: #399521; }
.right { overflow: hidden; background: #39A4DC; } /* 觸發 BFC */

右欄 overflow: hidden 建立 BFC,不會與左浮動重疊,自動佔據剩餘空間,且隨內容撐高容器,配合容器背景色視覺上等高。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved