三列布局(左右固定,中间自适应)

1、定位

<div class="left">我是左边,我是固定的</div>
<div class="middle">我是中间,我是自适应的,左边右边都position固定了,他们脱离了文档流,我终于得到机会挤进中间啦!只要我margin一下就没人会挡住我啦!我可真是个小机灵鬼(同时,我还是个自由人,我div写在开头中间结尾都可以呢)</div>
<div class="right">我是右边,我也是固定的</div>
<style type="text/css">
    *{
        margin:0;
        padding: 0;
    }
        .left, .right{
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
            top: 0;
        }
        .left{
            left: 0;        
        }
        .right{
            right: 0;
        }
        .middle{
            height: 200px;
            background:#efbdbd; 
            margin-left: 200px;
            margin-right: 200px;
        }
    </style>

图片描述

2、浮动

<div class="left">我是左边,我是固定的</div>
<div class="right">我是右边,我也是固定的</div>
<div class="middle">我是中间,我是自适应的,左右浮动脱离了文档流,我才挤进来呢,margin一下也不会被挡住啦(这里我div必须在左右的后面,因为我在前面的话,他们会浮在我后面的哟)</div>
.left, .right{
            width: 200px;
            height: 200px;
            background: red;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .middle{
            height: 200px;
            background:#efbdbd; 
            margin-left: 200px;
            margin-right: 200px;
        }

图片描述

3、圣杯布局

<div class="content">
    <div class="middle">我是中间,我是自适应的
        <p>
            1、左中右float:left;顺便position:relative后面会用到<br>
            2、中间width:100%;<br>
            3、这时,中间元素会把两边撑开,那么我们用margin-left把他拉回来;<br>
            4、两边元素倒是回来了,中间被盖住了怎么办?不着急,整个外层加个padding;<br>
            5、解决了上一个问题,左右元素又偏了!还记得刚开始的定位吗?对!对左右元素定位就好啦!
        </p>(我div必须在第一位)
    </div>
    <div class="left">我是左边,我是固定的</div>    
    <div class="right">我是右边,我也是固定的</div>
</div>
<style type="text/css">

    .middle, .left, .right{
        float: left;
        height: 200px;
        position: relative;
    }
    .middle{
        width: 100%;
        background:#efbdbd; 
    }
    .content{
        padding:0 200px;
    }
    .left{
        width:200px;
        background:red;
        margin-left: -100%;
        left: -200px;
    }
    .right{
        background:red;
        width:200px;  
        margin-left: -200px;
        right: -200px;
    }
    
    </style>

图片描述

4、双飞翼布局

<div class="middle">
        <div class="middle_son">我是中间,我是自适应的
            <p>
                1、左中右float:left;<br>
                2、中间width:100%;<br>
                3、这时,中间元素会把两边撑开,那么我们用margin-left把他拉回来;<br>
                4、两边元素倒是回来了,中间被盖住了怎么办?这次我们不在整个外层加个padding了;我们在middle里面加个子标签并margin<br>
                5、可以啦!
            </p>(我div必须在第一位)
        </div>
    </div>
    <div class="left">我是左边,我是固定的</div>    
    <div class="right">我是右边,我也是固定的</div>
<style type="text/css">

    .middle, .left, .right{
        float: left;
        height: 200px;
    }
    .middle{
        width: 100%;
        background:#efbdbd; 
        
    }
    .middle_son{
        margin:0 200px;
        
    }
    .left{
        width:200px;
        background:red;
        margin-left: -100%;
    }
    .right{
        background:red;
        width:200px;  
        margin-left: -200px;
    }
    
    </style>

图片描述

5、flex

<div class="content">
    <div class="left">我是左边,我是固定的</div>
    <div class="middle">我是中间,我是自适应的,利用css3的新属性fles,弹性布局,父元素设置display:flex,中间div设置flex;1;</div>
    <div class="right">我是右边,我也是固定的</div>
</div>
<style type="text/css">
        .content{
            display: flex;
        }
        .left, .right{
            width: 200px;
            height: 200px;
            background: red;
        }
        
        .middle{
            height: 200px;
            background:#efbdbd; 
            flex: 1;
        }
    </style>

图片描述

如果想要做两列布局(左边固定,右边自适应),全部可以参考这个,唯一有一种方法自己的方法利用BFC也很简单。
圣杯布局和双飞翼布局是参考了这位同学的,可以说是照搬来的。
https://www.cnblogs.com/imwtr...

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值