有關於css的四種布局

2021-09-13 13:06:56 字數 1067 閱讀 5475

右側自適應佔滿。

如下：（左右兩側，左側固定寬度200px，右側自適應佔滿）

**如下：



.first,.second


.first


.secondx
如下：（上中下三行，頭部200px高，底部200px高，中間自適應佔滿）

**如下：



.left,.center,.right


.left


.center


.right
如下：上中下三行，頭部200px高，底部200px高，中間自適應佔滿

**如下：



body


.top 


.center 


.bottom
如下：上下兩部分，底下這個固定高度200px，如果上面的內容少，那麼這個bottom就固定在底部，如果內容多，就把bottom擠著往下走。

**如下：

aijefoaiejfoaiejfaio


........


html


body


.top


.bottom
若有錯誤請及時通知

CSS四種方案實現 居中布局

不定寬元素的居中對齊 方案一 text align center display inline block css html demo 效果 優點 1.相容性好，相容ie 6 7只需對元素 display 屬性修改為 inline 缺點 child 會繼承 parent 的text align ce...

CSS三欄布局的四種方法

總括 不管是三欄布局還是兩欄布局都是我們在平時專案裡經常使用的，也許你不知道什麼事三欄布局什麼是兩欄布局但實際已經在用，或許你知道三欄布局的一種或兩種方法，但實際操作中也只會依賴那某一種方法，本文具體的介紹了三欄布局的四種方法，並介紹了它的使用場景。年華一去不復返，事業放棄再難成。所謂三欄布局就是指...

CSS三欄布局的四種方法

總括 不管是三欄布局還是兩欄布局都是我們在平時專案裡經常使用的，也許你不知道什麼事三欄布局什麼是兩欄布局但實際已經在用，或許你知道三欄布局的一種或兩種方法，但實際操作中也只會依賴那某一種方法，本文具體的介紹了三欄布局的四種方法，並介紹了它的使用場景。年華一去不復返，事業放棄再難成。所謂三欄布局就是指...