css 布局小技巧 左邊固定右邊自適應

2021-07-22 17:04:20 字數 1222 閱讀 7928

在頁面布局或者是列表布局中,我們經常出現乙個場景:左邊是固定寬度的盒子,右邊自適應:

<divclass="product_open">

<labelclass="label">open product:label>//這一列是固定寬度

<ulclass="check_game">//這一列自適應

<li><label><inputtype="checkbox"> racinglabel>li>

<li><label><inputtype="checkbox"> 4dlabel>li>

<li><label><inputtype="checkbox"> mark6label>li>

<li><label><inputtype="checkbox"> pokerlabel>li>

ul>

div>

.label

.check_game

這是博主推薦的方法,當然也有很多其他方法,比如讓左右盒子都display:inline-block; 給左邊的設定寬度,然後給右邊的盒子width:100%;margin-right:-左邊盒子寬度-間隙;

最近硝煙四起,作為乙個小菜鳥,要更加努力學習才行,目標今年看完犀牛書。讀書養性

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

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

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 使用浮...

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

parent left 我是左邊固定 div right 我是右邊自適應 div div 1 左邊向左浮動並固定寬度,右邊給margin left 注 右邊這個div一定不能給width 100 parent left right2 父元素相對定位,左邊絕對定位並給固定寬度,右邊margin lef...