左侧定宽 右侧自适应布局

实现思路:

    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;
}


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页