左侧定宽右侧自适应布局

最新推荐文章于 2020-05-13 10:33:48 发布

swordsmanYao

最新推荐文章于 2020-05-13 10:33:48 发布

阅读量133

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_21131135/article/details/80349841

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现思路：

1、左侧靠左浮动 float: left

2、右侧设置 margin-left 为左侧宽度，并利用 block 元素流体特性占满剩余宽度

3、在父元素或浮动元素后面的兄弟元素上面清除浮动

<div class="parent clear">
    <div class="left"></div>
    <div class="right"></div>
</div>

.clear {
    zoom: 1;
}
.clear:after {
    content: '';
    display: block;
    clear: both;
}
.parent {
    width: 500px;
}
.left {
    float: left;
    width: 50px;
    height: 100px;
    background: red;
}
.right {
    margin-left: 50px;
    background: green;
    height: 80px;
}