二欄布局以及三欄布局

2021-08-28 06:12:17 字數 1185 閱讀 5827

1、利用 calc 計算寬度的方法。

.left 


.right 


左側定寬


右側自適應
2、利用 float 配合 margin 實現。

.left 


.right 


左側定寬


右側自適應
3、利用 float 配合 overflow 實現。

.left 


.right 


左側定寬


右側自適應
4、利用flex實現。

.contain


.left 


.right 


左側定寬


右側自適應
1、float-margin方法。

缺點：由於dom結構限制左-右-中，主要內容無法最先載入。高度中間高度超出且沒有margin的情況下會出問題(文字環繞)：解決方案為清除浮動或建立bfc(實質也是清除浮動)。

.left 


.right 


.main
2、bfc規則

.left 


.right 


.main
3. 聖杯布局

.left 


.right 


.main 


.container
4. 雙飛翼布局

.main 


.content 


.left 


.right
5、flex布局

.container


.main 


.left 


.right 


111

三欄布局與兩欄布局

html 左邊定寬div 右邊自適應,前端前端前端前端前端前端前端前端前端前端div 1.left right 2.left right 3.left right 1.聖杯布局 class container class middle 中間div class left 左側div class rig...

兩欄布局和三欄布局

這篇文章中主要將自己學到的兩欄布局和三欄布局的方法總結一下 兩欄布局，左側固定，右側自適應 結構 css樣式 left right如果是右側固定，左側自適應呢？html css right left注意 1 哪側固定哪個div就寫在上邊，不能顛倒順序 2 除了用float浮動外，還可以用定位的方式，...

兩欄布局和三欄布局

class class left 我是文字測試君div class right 我是文字測試君div div 給固定寬度的一方設定浮動，給自適應的一方設定100 寬度值，用浮動控制左右寬固固定或自適應 left right style ie8及以下不支援 如果是左側固定右側自適應，給父級positi...