如何實現(xiàn)左右定寬，中間自適應寬度的css布局？事實上，實現(xiàn)CSS左右定寬布局和中間自適應的方法有很多種。下面是一個簡單的介紹供您參考；其原理是使用絕對定位來分別定位左右兩側(cè)的div。中間div使用ma

如何實現(xiàn)左右定寬，中間自適應寬度的css布局？

事實上，實現(xiàn)CSS左右定寬布局和中間自適應的方法有很多種。下面是一個簡單的介紹供您參考；

其原理是使用絕對定位來分別定位左右兩側(cè)的div。中間div使用margin屬性保留左、右div的寬度，并將中間div的寬度設置為100%。代碼如圖所示

在外層包裝一層div，設置屬性display:flex，其中的子元素設置屬性display:flex彈性：1，請參見下圖中的代碼

float layout將左div和右div分別浮動到左側(cè)和右側(cè)，并使用中間的margin屬性保留左右兩側(cè)的寬度。這有點類似于絕對定位布局。代碼如下圖所示

請看xal821792703（@honoka）的pen absolute兩列上的注意事項：設置一個“positioned”父元素div-a絕對定位，并將位置調(diào)整到瀏覽器左上角div-a的寬度（因為div-a絕對定位已經(jīng)被修改）與文檔流分離，如果未設置為div-a寬度，它將彼此重疊）div-c絕對定位并將位置調(diào)整到底部所有需要自適應的div都設置為100%寬度