兩欄布局,左邊固定寬度,右邊自適應

2022-06-21 20:48:15 字數 1700 閱讀 8523

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 使用浮動:margin

left

right

.use-margin .tleft 

.use-margin .tright

實現效果:

no.4 使用浮動:padding

left

right

.use-padding .l 

.use-padding .r

實現效果:

no.5 使用浮動:position

left

right

.use-position 

.use-position .lef

.use-position .rig

實現效果:

no.6 使用浮動:table

left

right

.use-table 

.use-table > tbody > tr > td:first-child

實現效果:

no.7 使用浮動:float+display:block

left

right

.use-to .le 

.use-to .ri

實現效果:

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...

解決左邊寬度固定,右邊寬度隨瀏覽器自適應的3種方案

在前端開發中,不管是自己寫專案,還是應試,都會遇到這樣乙個問題,實現左邊寬度固定,右邊寬度隨瀏覽器的變化而變化,在這個問題上衍生出來的還有一種場景,明明設定了固定寬度,卻出現變形的現象,今天就給大家分享一下解決方案。思路 父元素設定 display flex 左邊元素給固定的 flex basis ...