美文网首页Web前端之路
如何实现“右边宽度固定,左边自适应”的布局

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

作者: 春木橙云 | 来源:发表于2019-08-10 14:22 被阅读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>

相关文章

  • 如何实现双列布局和三列布局

    1、双列布局(拖动窗口时,窗口左边不动,右边自适应):左边宽度固定,右边自适应 2、三列布局(两边不动中间动):两...

  • CSS两栏布局(四种方法)

    两栏布局,要求左边固定,右边自适应。 方法1------浮动 思路:左边容器左浮动,宽度固定,右边元素设置marg...

  • 两栏布局

    两栏布局 左边固定,右边自适应的两栏布局 首先创建基本的HTML布局和最基本的样式。 左边固定宽度,高度不固定 基...

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

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

  • 两栏&三栏&双飞翼&圣杯

    两栏自适应布局(左边固定,右边自适应) 利用CSS中的calc()方法来动态设定宽度 双float布局 缺点:要清...

  • 布局

    两栏自适应布局(左边固定,右边自适应) 利用CSS中的calc()方法来动态设定宽度 双float布局 缺点:要清...

  • CSS 布局

    左右布局 1.浮动布局 左边元素左浮动,右边元素加上margin-left,实现左边固定,右边自适应的左右布局 h...

  • 常见技术问题及答案(一)

    一、用CSS实现右边宽度固定,左边自适应 .box{ display:flex; } .left{ w...

  • 常用布局使用felx布局来实现

    1. 一行显示,左边固定宽度右边自适应 html代码 css代码 2.一行显示,右边固定宽度左边自适应 html代...

  • css布局

    左边定宽,右边宽度自适应 等高自适应,两列布局

网友评论

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

    本文链接:https://www.haomeiwen.com/subject/idcrjctx.html