双栏·三栏（圣杯，双飞翼）布局方法

最新推荐文章于 2022-02-22 16:54:30 发布

zzh990822

最新推荐文章于 2022-02-22 16:54:30 发布

阅读量83

点赞数

本文链接：https://blog.csdn.net/zzh990822/article/details/109573778

版权

1. 两栏布局,左边定宽

1.<div id="left">左边定宽</div> <div id="right">右边自适应,前端前端前端前端前端前端前端前端前端前端</div>

#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%; }

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

<div class="container"> <div class="middle"> 中间 </div> <div class="left"> 左侧 </div> <div class="right"> 右侧 </div> </div> <div class="footer"> 尾部 </div>

1.圣杯布局

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>

#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的长度)，他就会移动到上一层的最左边。

zzh990822

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
双栏·三栏（圣杯，双飞翼）布局方法

1. 两栏布局,左边定宽1.<div id="left">左边定宽</div><div id="right">右边自适应,前端前端前端前端前端前端前端前端前端前端</div>#left{ float: left; width: 200px; margin-right: -200px; height: ...
复制链接

扫一扫