如果有這麼乙個表單需求，前面是乙個名稱，中間是乙個表單，右側是乙個按鈕或者乙個字串。
需要自適應布局，名稱為固定長度，右側也是固定，中間部分自適應整個width。
先來看看html標籤1
6<>年齡歲
首先，我想到的有這麼幾種display，乙個是inline-block。
於是css就變成這樣1.name,.input,.unit{
display:inline-block;
.name,.unit{
width: 50px;
.input{
width: 100%;
margin: 0 -54px;
overflow: hidden;
.input input{
margin:0 54px;
display:block;
於是發現，input並不能自動撐開，即便給它加上了block。
再來試試float。1.name,.unit{
width: 50px;
.name{
float:left;
.unit{
float:right;
.input{
overflow: hidden;
.input input{
width:100%;
發現還是不行，因為最後的乙個.unit，會另起一行。
那就把html結構調整一下1
7<>年齡歲
終於成功了，但是input的右側邊框被遮住了。
這個是因為input的width是100%，它的border和outline，把width撐開，其實這個時候的input的寬度為100%+4px。
你可以去掉邊框，或者寬度設定百分之99，98等。
上面有個margin:0 -54px的css，因為inline-block會有元素間距的產生，具體的可以參考張鑫旭的部落格關於inline-block元素間間距(張鑫旭)
左右布局 左邊定寬 右邊自適應
要求 不少於三種方法 所有方案 父元素的寬度為單位為 absolute padding left right 小結 父元素設定padding left是給左邊元素預留空間，左邊元素絕對定位到該位置。flex，未來趨勢，推薦 left right 小結 flow屬性為flow grow,flow sh...
CSS布局樣式 左右布局，左邊定寬，右邊自適應
1.display table width 100 和 diplay table cell tabletitle head wrap sidebar content style id wrap class sidebar sidebardiv class content contentdiv div...
右邊自適應 左右布局 前端布局那點事
這篇文章主要聊一聊布局這件大事。只要開始步入前端的大門，布局這件事就是逃避不了的，這也是前端開發人員必修的內功。所以接下來這篇文章我們主要講一講聖杯布局和雙飛翼布局。當然如果你已經非常了解這兩個布局的話，可以選擇忽略以下內容。總的來說，這兩個布局都是基於同乙個想法就是左右側欄寬度固定，中間內容欄實現...