如何實(shí)現(xiàn)左右定寬,中間自適應(yīng)寬度的css布局?
網(wǎng)友解答: 對(duì)于左右定寬中間自適應(yīng)這種css布局,其實(shí)有很多實(shí)現(xiàn)方法,下面簡(jiǎn)單介紹幾種,供大家參考;絕對(duì)定位+margin原理是將左右兩邊的div使用絕對(duì)定位分別定位到左右兩邊,中間的d
對(duì)于左右定寬中間自適應(yīng)這種css布局,其實(shí)有很多實(shí)現(xiàn)方法,下面簡(jiǎn)單介紹幾種,供大家參考;
絕對(duì)定位+margin原理是將左右兩邊的div使用絕對(duì)定位分別定位到左右兩邊,中間的div使用margin屬性,留出左右div的寬度,將其中間的div寬度設(shè)為100%即可,代碼如圖
flex布局(彈性盒子)在外層包一層div,設(shè)置屬性display:flex,里面的子元素設(shè)置屬性flex:1,具體實(shí)現(xiàn),看下圖代碼
float(浮動(dòng)布局)float布局將左右div分別浮動(dòng)到左右,中間使用margin屬性,留出左右的寬度,這個(gè)跟絕對(duì)定位布局有點(diǎn)相似,代碼如下圖
效果圖:總結(jié):
實(shí)現(xiàn)這種左右定寬,中間自適應(yīng)的css布局,其實(shí)有很多種實(shí)現(xiàn)方法,比如還有“圣杯布局”、“雙飛翼布局”;個(gè)人比較推薦flex布局方式,這也是css3新屬性,實(shí)現(xiàn)起來(lái)比較方便;如有疑問(wèn),歡迎在評(píng)論下方留言,大家一起討論
網(wǎng)友解答:謝謝邀請(qǐng)!