HTML CSS的兩欄 三欄布局以及垂直居中

2021-09-12 22:05:12 字數 2033 閱讀 3952

這一次我想講解一下html+css的兩欄、三欄布局以及垂直居中的實現方式。因為個人所學有限所以可能不會羅列出所有的實現方法,不過我會繼續努力查漏補缺。

1.兩欄布局(左固定,右適應)

先寫出初始樣式和結構。

右固定,左適應同理。

2.三欄布局

以上這些實現方式,雖然實現了但還不夠好。因為main是主要的顯示區域,所以我們應該先載入它再載入其它的地方。

.container 

.main

.left

.right

.container 

.main

.left

.right

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet

div

.wrap

.main

.left

.right

兩種布局方式的不同之處在於如何處理中間主列的位置:

聖杯布局是利用父容器的左、右內邊距+兩個從列相對定位;

雙飛翼布局是把主列巢狀在乙個新的父級塊中利用主列的左、右外邊距進行布局調整

3.垂直居中

.container 

.content

.container 

.content

.container 

.content

.container 

.content

.container 

.content

.container::after

效果都如下

HTML CSS實現兩欄和三欄布局

三欄布局 三列自適應布局通常指兩邊定寬,中間部分寬度自適應。這裡主要分為兩大類,一類是基於position傳統的實現,一類是基於css3新特性彈性盒模型布局實現。1.基於傳統的position進行布局 1 絕對定位法 絕對定位法原理是將左右兩邊使用absolute定位,因為絕對定位使其脫離文件流,後...

三欄布局與兩欄布局

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浮動外,還可以用定位的方式,...