三栏布局与两栏布局

一.两栏布局,左边定宽

//html
<div id="left">左边定宽</div>
<div id="right">右边自适应,前端前端前端前端前端前端前端前端前端前端</div>
1.
#left{
    float: left;
    width: 200px;
    margin-right: -200px;
    height: 50%;
    background: green;
}
#right{
    float: left;
    margin-left: 210px;
    width: 100%;
    height: 50%;
    background: red;
}

2.

#left{
    width:200px;
    height: 50%;
    position: absolute;
    background: red;
}
#right{
    height: 50%;
    width: 100%;
    margin-left: 200px;
    background: yellow;
}

3.

#left{
    width: 200px;
    background: red;
    float: left;
    height: 50%;
}
#right{
    width: 100%;
    margin-left:210px;
    background: pink;
    height: 50%;
}

二. 三栏布局,中间自适应

1.圣杯布局
html:
    <div class="container">
        <div class="middle">
            中间
        </div>
        <div class="left">
            左侧
        </div>
        <div class="right">
            右侧
        </div>
    </div>
    <div class="footer">
        尾部
    </div>
css:
        .container {
            padding: 0 220px 0 220px;
            overflow: hidden;
        }
        .left,
        .middle,
        .right {
            position: relative;
            float: left;
            // 多列等高
            margin-bottom: -2000px;   
            padding-bottom: 2000px;
        }
        .left {
            margin-left: -100%;
            left: -200px;
            width: 200px;
            background: red;
        }
        .right {
            margin-left: -220px;
            right: -220px;
            width: 220px;
            background: green;
        }
        .middle {
            width: 100%;
            background: blue;
        }
2.通过positon定位实现三栏布局中间自适应.

将父元素设置为position:relative.
左边元素:position:absolute;
left:0;
top:0;
右边元素:positon:absolute;
right:0;
top:0;
中间元素:margin-left:左边元素的宽度;
margin-right:右边元素的宽度.

3.浮动法

将左边元素设置为左浮动:float:left;
将右边元素设置为右浮动:float:right;
中间元素:margin-left:左边元素的宽度;
margin-right:右边元素的宽度.
中间元素会自动居中
注意的是:html中,中间元素必须写在最后!否则不能居中.

4.margin负值法(双飞翼)
<body>
       <div id="main">
           <div class="content"></div>(content包含在main中)
       </div>
       <div id="left"></div>
       <div id="right"></div>
</body>

下面是css样式:

#main {float:left;width:100%;}
.content {margin:0 200px;height:100%;background:red;}
#left{float:left;width:200px;margin-left:-100%;background:blue;}
#right{float:left;width:200px;margin-left:-200px;background:green;}

用main将content包起来,然后浮动,content利用margin向两边空出距离,让左右元素进来。左右元素都是左浮动.
当一个元素margin-left:的距离等于他自身的距离的负值时,他就会移动到上一层,right块元素就会移动到main的最右边.
当一个元素margin-left:的距离等于负100%(也就是body的长度),他就会移动到上一层的最左边。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值