三栏布局与两栏布局

最新推荐文章于 2023-05-14 09:05:56 发布

mr_fzz

最新推荐文章于 2023-05-14 09:05:56 发布

阅读量670

点赞数

分类专栏： html+css 文章标签：布局

本文链接：https://blog.csdn.net/mr_fzz/article/details/53032489

版权

html+css 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

一.两栏布局,左边定宽

//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;
}

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

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