在前端開發中，不管是自己寫專案，還是應試，都會遇到這樣乙個問題，實現左邊寬度固定，右邊寬度隨瀏覽器的變化而變化，在這個問題上衍生出來的還有一種場景，明明設定了固定寬度，卻出現變形的現象，今天就給大家分享一下解決方案。
思路：父元素設定 display:flex；
左邊元素給固定的 flex-basis 屬性值；
右邊元素設定 flex-grow 為 1 或者 flex 為 1。
<
!doctype html>
"en"
>
"utf-8"
/>
<
/head>
"text/css"
>
.box
.left
.right
<
/style>
="box"
>
="left"
>
<
/div>
="right"
>
<
/div>
<
/div>
<
/body>
<
/html>
父元素設定 display:flex；
左邊元素設定最小寬度 min-width 屬性值；
右邊元素可設定 flex-grow 為 1 或者 flex 為 1 或者寬度 100%，填充剩餘空間。（這裡注意只有左邊設定最小寬度的時候，右邊才能使用100%）。
<
!doctype html>
"en"
>
"utf-8"
/>
<
/head>
"text/css"
>
.box
.left
.right
<
/style>
="box"
>
="left"
>
<
/div>
="right"
>
<
/div>
<
/div>
<
/body>
<
/html>
左邊元素浮動，設定固定的寬度；
右邊元素設定 margin-left 距離為左邊元素寬度；
<
!doctype html>
"en"
>
"utf-8"
/>
<
/head>
"text/css"
>
.left
.right
<
/style>
="left"
>
<
/div>
="right"
>
<
/div>
<
/div>
<
/body>
<
/html>
使用 float 時，左邊元素設定固定寬度，右邊元素設定相應的 margin-left 值。
使用 flex 時，如果左邊元素寬度使用 flex-basis 屬性，右邊元素可設定 flex-grow 為 1 或者 flex 為 1。如果左邊元素寬度使用 min-width 屬性，右邊元素除了可以設定 flex-grow 為 1，或者 flex 為 1，還可以設定寬度 100%。
兩欄布局，左邊固定寬度，右邊自適應
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 使用浮...
網頁布局（左邊固定寬度）
123 7353637 38看見了看見離開家離開家破誒 兩口 兩口卡計畫看看見了看見離開家離開家破誒 兩口 兩口卡計畫看看見了看見離開家離開家破誒 兩口 兩口 3940 看見了看見離開家離開家破誒 兩口 兩口卡計畫看看見了看見離開家離開家破誒 兩口 兩口卡計畫看看見了看見離開家離開家破誒 兩口 兩口...
左右布局並且左邊固定寬度的幾種實現辦法
布局後的樣子就是長這樣 以下是讓布局長這樣子的一些方法 1.左邊設定position為absolute，右邊margin left，右邊的div不設定寬度，在它的子元素設定寬度100 具體看下面 body div style width 200px height 100px position abs...