【逆戰班】
1.flex布局
flexible box 模型，通常被稱為 flexbox，是一種一維的布局模型。它給 flexbox 的子元素之間提供了強大的空間分布和對齊能力。我們說 flexbox 是一種一維的布局，是因為乙個 flexbox 一次只能處理乙個維度上的元素布局，一行或者一列。這裡我們利用flex布局來實現兩列固定一列自適應
"main">
"left">
"center">
"right">
對左右兩部分分別使用float:left和float:right，float使左右兩個元素脫離文件流，中間元素正常在正常文件流中。對中間文件流使用margin指定左右外邊距進行定位。
"main">
"left">
"right">
"center">
對三部分使用float:left，然後左右兩邊固定寬度，中間使用calc函式計算寬度。
"main">
"left">
"center">
"right">
用絕對定位把左右兩部分固定在兩端，對中間文件流使用margin指定左右外邊距進行定位。
"main">
"left">
"center">
"right">
html 三列布局（兩列自適應，一列固定寬度）
原文 html 三列布局 兩列自適應，一列固定寬度 不做過多解釋 主要是記錄乙個完整的布局樣式，實現頁面大致三列其中左右兩列是自適應寬度，中間固定寬度效果。不多少 奉上 公共標籤樣式 main 外邊框自適應區域 main title 標題 main title 頭部文號區 70px content ...
html 三列布局（兩列自適應，一列固定寬度）
不做過多解釋 主要是記錄乙個完整的布局樣式，實現頁面大致三列其中左右兩列是自適應寬度，中間固定寬度效果。不多少 奉上 公共標籤樣式 main 外邊框自適應區域 main title 標題 main title 頭部文號區 70px content title 區域塊設定 area area left...
兩列固定，中間列寬度自適應
首先，我先舉兩個例子，乙個是聖杯型布局，另外乙個是雙飛翼型。雙飛翼型是某博主由聖杯型參考後自創的乙個布局方式。1.聖杯型布局 嘗試之路考慮以下dom結構 id page id hd div id bd class main div class sub div class extra div div ...