左邊固定，右邊自適應的兩欄布局。
基本樣式
高度有可能會很小，也可能很大。
這裡的內容可能比左側高，也可能比左側低。寬度需要自適應。
基本的樣式是，兩個div相距20px, 左側div寬 120px
padding: 15px 20px;
border: 1px dashed #ff6c60;
}.left
.right
通過width: calc(100% - 140px)來動態計算右側盒子的寬度。需要知道右側盒子距離左邊的距離，以及左側盒子具體的寬度(content+padding+border)，以此計算父容器寬度的100%需要減去的數值。同時，還需要知道右側盒子的寬度是否包含border的寬度。
box-sizing: content-box;
font-size: 0; // 消除空格的影響
} display: inline-block;
vertical-align: top; // 頂端對齊
font-size: 14px;
box-sizing: border-box;
} width: calc(100% - 140px);
}通過動態計算寬度來實現自適應。但是，由於浮動的block元素在有空間的情況下會依次緊貼，排列在一行，所以無需設定display: inline-block;，自然也就少了頂端對齊，空格字元佔空間等問題。
overflow: auto; // 清除浮動
box-sizing: content-box;
} float: left;
box-sizing: border-box;
} width: calc(100% - 140px);
}block級別的元素盒子的寬度具有填滿父容器，並隨著父容器的寬度自適應的流動特性。
overflow: hidden; // 清除浮動
} float: left;
} margin-left: 150px;
}另外一種讓兩個block排列到一起的方法是對左側盒子使用position: absolute的絕對定位。這樣，右側盒子也能無視掉它。
position: absolute;
} margin-left: 150px;
}在正常流中，如果元素建立了乙個新的塊格式化上下文(例如，除了「可見」之外，具有「overflow」的元素)，則不能與元素本身在相同塊格式化上下文中的任何浮動的空白框重疊
overflow: auto;
} float: left;
margin-right: 20px;
} margin-left: 0;
overflow: auto;
}display: flex;
align-items: flex-start;
} flex: 0 0 auto;
} flex: 1 1 auto;
}display: grid;
grid-template-columns: 120px 1fr;
align-items: start;
} box-sizing: border-box;
} grid-column: 1;
} grid-column: 2;
}
右邊自適應 左右布局 css左右自適應布局
如果有這麼乙個表單需求，前面是乙個名稱，中間是乙個表單，右側是乙個按鈕或者乙個字串。需要自適應布局，名稱為固定長度，右側也是固定，中間部分自適應整個width。先來看看html標籤1 6 年齡歲 首先，我想到的有這麼幾種display，乙個是inline block。於是css就變成這樣1.name...
css常用左右布局方案整理
實際專案開發過程中我們經常會遇到頁面div左右布局的需求 左側 div 固定寬度，右側 div 自適應寬度，填充滿剩餘頁面，下面整理幾種常用的方案 1 左側 div 設定float屬性為left，右側 div 設定margin left屬性等於或大於左側 div 寬度 1 左側 div 設定 flo...
頁面左右布局
例如 現有乙個頁面，需要左側200px,右側自適應頁面寬度。頁面 如下 import react,from react import styles from csslayout.less export default class csslayout extends component render ...