方法一：float+padding +順序**如下：利用div塊是塊級元素，佔自動佔滿一整行
利用float浮動的原理來做左邊固定的容器，右邊固定的容器
利用padding+box-sizing: border-box給div塊級元素左右兩邊騰出左右固定的空間，
利用順序是因為float與div塊的性質
【浮動在當前行，脫離原來文字，進入到新的一層（浮動層），然後在設定的方向（左右）移動，直到遇到父級盒子的邊緣，或者其他浮》 動塊的邊緣停止,且當一行沒有足夠空間存放所有浮動塊時，多出來的盒子會擠到下一行，然後按照設定的方向繼續移動，直到遇到父級》 盒子的邊緣或其他浮動塊的邊緣】
利用position定位固定容器位置**如下：padding+box-sizing:border-box;給容器騰出固定容器的位置
.main
.lf.center
.rtleft
center
right
利用flex的三個屬性 flex-grow：放大,flex-shrink：縮小,flex-basis：子元素長度**如下：
.main-flex
.lf-flex,.rt-flex
.center-flex
left
center
right
.main-display-table
.main-display-table div
.main-display-table div:nth-child(2)
left
center
right
.main-grid
.main-grid>div
.main-grid>div:nth-child(2)
left
center
right
css左邊固定，右邊自適應
lang en charset utf 8 title head class container class left div class right div div body html 方法1 左邊div使用float left left right style 方法2 將外部容器div設定dis...
css 布局小技巧 左邊固定右邊自適應
在頁面布局或者是列表布局中，我們經常出現乙個場景 左邊是固定寬度的盒子，右邊自適應 divclass product open labelclass label open product label 這一列是固定寬度 ulclass check game 這一列自適應 li label inputt...
兩欄布局，左邊固定寬度，右邊自適應
no.1 使用浮動 float left right use float left use float right 實現效果 no.2 使用浮動 flex left right use flex use flex flex left use flex flex right 實現效果 no.3 使用浮...