Web前端之路

如何实现“右边宽度固定,左边自适应”的布局

2019-08-10  本文已影响3人  春木橙云

最近台风天,各位风口的看官老爷注意安全哈!

方法一:

<style>
body{
    display: flex;
}
.left{
    background-color: rebeccapurple;
    height: 200px;
    flex: 1;
}
.right{
    background-color: red;
    height: 200px;
    width: 100px;
}
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

方法二:

<style>
    div {
        height: 200px;
    }
    .left {
        float: right;
        width: 200px;
        background-color: rebeccapurple;
    }
    .right {
        margin-right: 200px;
        background-color: red;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

上一篇 下一篇

猜你喜欢

热点阅读