针对“左边固定宽右边自适应的6种方法”,以下是详细的攻略:
一、使用float属性
通过给左边固定宽的元素设置浮动属性float: left
,并给右边自适应的元素设置margin-left
和overflow:hidden
属性,就可以达到目的。
示例代码:
<div class="container">
<div class="fixed">固定宽度</div>
<div class="auto">自适应宽度</div>
</div>
.container {
overflow: hidden;
}
.fixed {
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
.auto {
margin-left: 100px; /* 左边fixed的宽度 */
background-color: cyan;
}
二、使用flex布局
通过将display: flex
属性应用于父元素,并给左边固定宽度的元素设置flex-shrink: 0
属性,右边自适应的元素将占据剩余空间。
示例代码:
<div class="container">
<div class="fixed">固定宽度</div>
<div class="auto">自适应宽度</div>
</div>
.container {
display: flex;
}
.fixed {
width: 100px;
height: 100px;
background-color: yellow;
flex-shrink: 0; /* 禁止缩小 */
}
.auto {
flex-grow: 1; /* 占据剩余空间 */
background-color: cyan;
}
三、使用绝对定位
通过将左边固定宽度的元素position: absolute
绝对定位,然后使用left
属性指定距离左边的距离,再通过给右边自适应的元素设置margin-left
属性占据剩余空间。
示例代码:
<div class="container">
<div class="fixed">固定宽度</div>
<div class="auto">自适应宽度</div>
</div>
.container {
position: relative;
}
.fixed {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
top: 0;
left: 0;
}
.auto {
margin-left: 100px;
background-color: cyan;
}
四、使用grid布局
通过将display: grid
属性应用于父元素,并设置左边固定宽度的元素所在的列宽度为固定值,右边自适应的元素将占据自适应的空间。
示例代码:
<div class="container">
<div class="fixed">固定宽度</div>
<div class="auto">自适应宽度</div>
</div>
.container {
display: grid;
grid-template-columns: 100px auto; /* 左侧固定100px */
}
.fixed {
width: 100px;
height: 100px;
background-color: yellow;
}
.auto {
background-color: cyan;
}
五、使用表格布局
通过将display: table
属性应用于父元素,并将左边固定宽度的元素包裹在一个td
标签中,右边自适应的元素包裹在一个td
标签中,右边的td
设置width: 100%
属性。
示例代码:
<div class="container">
<table>
<tr>
<td class="fixed">固定宽度</td>
<td class="auto">自适应宽度</td>
</tr>
</table>
</div>
.container {
display: table;
}
.fixed {
width: 100px;
height: 100px;
background-color: yellow;
}
.auto {
width: 100%;
background-color: cyan;
}
六、使用多列布局
通过使用多列布局(column-count
属性)将左边的元素放在第一列,将右边的元素放在第二列,并设置第一列的宽度为固定值。
示例代码:
<div class="container">
<div class="fixed">固定宽度</div>
<div class="auto">自适应宽度</div>
</div>
.container {
column-count: 2;
}
.fixed {
width: 100px;
height: 100px;
background-color: yellow;
break-inside: avoid; /* 避免跨页面 */
}
.auto {
background-color: cyan;
}
以上六种方法均可以实现左边固定宽度,右边自适应宽度的效果,具体应使用那种方法根据不同的需求选择不同的方法。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:左边固定宽右边自适应的6种方法 - Python技术站