經典布局題 左邊固定右邊自適應的幾種做法

2021-10-09 09:54:32 字數 747 閱讀 3442

="parent"


>


="left"


>我是左邊固定<


/div>


="right"


>我是右邊自適應<


/div>


<


/div>
1、左邊向左浮動並固定寬度，右邊給margin-left (注：右邊這個div一定不能給width:100%)

.parent


.left


.right
2、父元素相對定位，左邊絕對定位並給固定寬度，右邊margin-left (注：右邊這個div一定不能給width:100%)

.parent


.left


.right
3、父元素相對定位，且需要設定padding-left,左邊的元素絕對定位且為固定寬度，右邊的元素需要設定width:100%

.parent


.left


.right
4、使用flexbox,父元素display:flex,左邊元素固定寬度，右邊一定記得加flex:1

.parent


.left


.right
5、利用bfc特性：bfc的元素不能與浮動元素重疊

.parent


.left


.right

經典布局題 左邊固定右邊自適應的幾種做法和解釋

實現乙個左右布局，左邊固定寬度200px，右邊實現寬度自適應的兩列布局 下面分享下我的幾種做法以及解釋 首先我們先通用的布局樣式 class fixed 固定200pxdiv class auto 自動充滿div div 來個預設樣式 fixed auto class fixed l1 固定200p...

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