不用flex的情况下 css 一个容器内 一个宽度固定 一个宽度自适应
时间: 2024-03-07 07:05:33 浏览: 82
左侧固定宽度,右侧自适应宽度的CSS布局
使用 float 和 margin 可以实现一个容器内一个宽度固定一个宽度自适应的布局。
HTML 代码示例如下:
```html
<div class="container">
<div class="fixed-width"></div>
<div class="auto-width"></div>
</div>
```
CSS 样式示例如下:
```css
.container {
overflow: hidden; /* 清除浮动 */
}
.fixed-width {
float: left;
width: 100px;
}
.auto-width {
margin-left: 100px; /* 留出固定宽度 */
}
```
通过设置固定宽度的元素为浮动元素,并且设置自适应宽度的元素为非浮动元素,给自适应宽度的元素设置左边距来留出固定宽度的空间,从而实现固定宽度和自适应宽度的布局。同时,也要在容器上设置 overflow: hidden,来清除浮动元素对容器高度的影响。
阅读全文