使用CSS实现三列布局(左右固定宽度,中间自适应)六种方法

1、利用左右浮动,脱离文档流,中间元素正常,设置左右margin。元素顺序:left 、 right 、middle(middle要放在最后)

如果窗口太小,右边元素会被挤到下一行

<head>
<style>
    .box{
        height: 200px;
        padding: 0 200px 0 100px;
    }
    .left{
        width: 100px;
        float: left;
        margin-left: -100px;
        background: red;
    }
    .right{
        width: 200px;
        float: right;
        margin-right: -200px;
        background: green;
    }
    .middle{
        width: 100%;
        float: right;
        background: blue;
    }
</style>
</head>
<body>
   <div class="box">
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="middle">中间</div>
   </div>
</body>

2、圣杯布局(注意:标签顺序:自适应的放前面,固定的放后面)

<head>
<style>
    .box{
        height: 200px;
        padding: 0 200px 0 100px;
    }
    .left{
        width: 100px;
        float: left;
        margin-left: -100%;
        position: relative;
        left: -100px;
        background: red;
    }
    .right{
        width: 200px;
        float: left;
        margin-left: -200px;
        position: relative;
        right: -200px;
        background: green;
    }
    .middle{
        width: 100%;
        float: left;
        background: blue;
    }
</style>
</head>
<body>
   <div class="box">
        <div class="middle">中间</div>
        <div class="left">左</div>
        <div class="right">右</div>
   </div>
</body>

3、双飞翼布局(与圣杯布局的区别:自适应部分content又被包裹了一次,样式也从最外层box中的padding变成content中的margin,注意:中间的自适应会占左右位置)

<head>
<style>
    .box{
        height: 200px;
    }
    .left{
        width: 100px;
        float: left;
        margin-left: -100%;
        background: red;
    }
    .right{
        width: 200px;
        float: left;
        margin-left: -200px;
        background: green;
    }
    .middle{
        width: 100%;
        float: left;
        background: blue;
    }
    .content{
        margin: 0 200px 0 100px;
    }
</style>
</head>
<body>
   <div class="box">
        <div class="middle">
            <div class="content">中间</div>
        </div>
        <div class="left">左</div>
        <div class="right">右</div>
   </div>
</body>

4、利用绝对定位

<head>
<style>
    .box{
        height: 200px;
        width: 100%;
        position: relative;
    }
    .left{
        width: 100px;
        position: absolute;
        top: 0px;
        left: 0px;
        background: red;
    }
    .right{
        width: 200px;
        position: absolute;
        top: 0px;
        right: 0px;
        background: green;
    }
    .middle{
        margin: 0 200px 0 100px;
        background: blue;
    }
</style>
</head>
<body>
   <div class="box">
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="middle">中间</div>
   </div>
</body>

5、使用flex布局( flex 是 flex-grow、flex-shrink、flex-basis的缩写 flex:1 等同于flex-grow: 1; flex-shrink: 1; flex-basis: 0%;)

<head>
<style>
    .box{
        display: flex;
        flex-direction: row;
    
    }
    .left{
        width: 100px;
        background: red;
    }
    .right{
        width: 200px;
        background: green;
    }
    .middle{
        background: blue;
        flex: 1;
    }
</style>
</head>
<body>
   <div class="box">
        <div class="left">左</div>
        <div class="middle">中间</div>
        <div class="right">右</div>
   </div>
</body>

6、利用calc()动态计算中间的值

<head>
<style>
    .box{
        height: 200px;
    }
    .left{
        width: 100px;
        float: left;
        background: red;
    }
    .right{
        width: 200px;
        float: left;
        background: green;
    }
    .middle{
        width: calc(100% - 300px);
        float: left;
        background: blue;
    }
</style>
</head>
<body>
   <div class="box">
        <div class="left">左</div>
        <div class="middle">中间</div>
        <div class="right">右</div>
   </div>
</body>

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值