前言
對於 flex 彈性布局相信大家都有所了解,它是 css3 中的屬性,然而它具有一定的相容性問題。樓主前幾天面試時遇到了面試官需要設計乙個兩列布局,我當然就說父元素 flex 吧哩吧啦,然而需要用基本的 css2 中的屬性布局,傻掉了。。。
要求:兩列布局,左邊定寬,右邊自適應
html 布局如下
我是定寬左1. flex 布局我是自適應右
#father2. css2 普通布局 注意:多列布局時需要將浮動元素的 html **寫在自適應元素的前面。如以下為三列布局的**:#left
#right
我是左定寬效果如圖:我是中間自適應
我是右定寬
兩列布局 三列適應布局 兩列等高適應布局。
一.兩列布局 左側定寬 右側自適應。四種方法 flex position float和負外邊距 外邊距 1.使用flex.右側自適應區塊 左側定寬200px區塊 2.使用position,考慮了頁面優化,右側區域先載入。右側自適應區塊 左側定寬200px區塊 3.利用float和負外邊距 這裡的10...
CSS實現網頁布局 一列,兩列,三列
1.一列布局 又叫單列布局 一列布局需要掌握3個知識點 標準文件流,其中又包含了塊級元素和行級元素,還有margin屬性,可以說實現一列布局的關鍵 就是由margin屬性實現的,通過設定margin 0 auto 來實現水平居中,auto就是它會根據瀏覽器的寬度自動設定兩邊的外邊距。要設定margi...
兩列布局 多列布局
用css html編寫乙個兩列布局的網頁,要求右側寬度為200px,左側自動擴充套件 container left div right div div 利用浮動float margin container left right利用彈性盒子來寫 container left right利用定位posi...