左右两列定宽，中间自适应的方法

最新推荐文章于 2022-05-31 16:41:10 发布

郭从墨

最新推荐文章于 2022-05-31 16:41:10 发布

阅读量517

点赞数

分类专栏： Css

本文链接：https://blog.csdn.net/qq_21901233/article/details/79459010

版权

Css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1. 使用flex布局

<div class="container">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
</div>

css布局：

div.left {
    float:left;
    width: 100px;
    background-color: #dd4444;
}
div.middle {
    margin-left: 100px;
    background-color: #FFFFAE;
    margin-right: 200px;
}
div.right {
    float:right;
    width: 200px;
    background-color: grey;
}

2. margin + float

dom结构：

<div class="left">left</div>
<div class="right">right</div>
<div class="middle">middle</div>

css布局：

       div.left {
            float:left;
            width: 100px;
            background-color: #dd4444;
        }
        div.middle {
            margin-left: 100px;
            background-color: #FFFFAE;
            margin-right: 200px;
        }
        div.right {
            float:right;
            width: 200px;
            background-color: grey;
        }

3. absolute + margin

dom结构：

 <div class="left">left</div>
 <div class="right">right</div>
 <div class="middle">middle</div>

css布局：

        body {
            margin: 0;
        }
        div.left {
            position: absolute;
            width: 100px;
            background-color: #dd4444;
        }
        div.middle {
            margin-left: 100px;
            background-color: #FFFFAE;
            margin-right: 200px;
        }
        div.right {
            position: absolute;
            right: 0;
            width: 200px;
            background-color: grey;
        }