三列布局

最新推荐文章于 2021-08-03 22:00:24 发布

静颍流年

最新推荐文章于 2021-08-03 22:00:24 发布

阅读量732

点赞数

文章标签：三列布局

本文链接：https://blog.csdn.net/weixin_43571052/article/details/84308212

版权

三列布局：两边固定，当中自适应；中间列要完整地显示；中间列要优先加载。

分类：

圣杯布局：利用父容器的左右内边距+两个从列相对定位。

浮动：搭建完整的布局框架。

margin为负值：调整旁边两列的位置。（margin为负值将元素的边界往里收）

使用相对定位调整旁边两列的位置。

双飞翼布局：把主列嵌套在一个新的父级快中利用主列的左右内边距进行布局调整。

伪等高布局：三列等高。（应用于圣杯和双飞翼布局）

先给padding扩大（较大值）再给margin同样的负值；

给父元素overflow：hidden；

圣杯布局伪等高布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
    .clearfix :before,
    .clearfix :after{
        content: "";
        display:table;
        clear:both;
    }
    .box1{
        position: absolute;
        padding:0 300px;
        width: 800px;
        overflow: hidden;
    }
    .box1 .middle{
        float: left;
        background-color: yellow;
        width: 100%;
        text-align: center;
        padding-bottom:10000px;   /*伪等高布局*/
        margin-bottom:-10000px;     
    }
    .box1 .left{
        float:left;
        position: relative;
        left: -300px;
        width:300px;
        margin-left: -100%;
        background-color: red;
        text-align: center;
        padding-bottom:10000px;   /*伪等高布局*/
        margin-bottom:-10000px;
    }
    .box1 .right{
        position: relative;
        right: -200px;
        float: left;
        width:200px;
        margin-left: -200px;
        background-color: blue; 
        text-align: center;
        padding-bottom:10000px;   /*伪等高布局*/
        margin-bottom:-10000px;
    }
    </style>
</head>
<body>
    <div class="box1 clearfix">
        <div class="middle">花儿啊花儿啊花儿啊花儿啊花儿啊</b>
            <h4>middle</h4>
            <h4>middle</h4>
            <h4>middle</h4>
            <h4>middle</h4>

        </div>
        <div class="left">left
            <h4>left</h4>
            <h4>left</h4>
            <h4>left</h4>
            <h4>left</h4>
        </div>
        <div class="right">right</div>
    </div>
    <div class="box2"></div>
    
</body>
</html>

效果图

双飞翼布局伪等高布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>练习</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <style type="text/css">
    .in-middle{
        padding: 0 300px;
    }
    .middle{
        float: left;
        width:100%;
        background-color: pink;
    }
     .left{
       float: left;
        margin-left: -100%;
        width: 300px;
        background-color: green;
    }
    .right{
        float: left;
        margin-left: -300px;
        width: 300px;
        background-color:blue;
    }
    /*三列的伪等高布局*/
    .content{
        overflow: hidden;
    }
    .middle, .left, .right{
        padding-bottom: 10000px;
        margin-bottom: -10000px;
    }
    </style>
</head>
<body>
    <div class="content clearfix">
        <div class="middle">
            <div class="in-middle">middle<br/>
                middle<br/>
                middle<br/>
                middle<br/>
                middle<br/>
            </div>
        </div>
        <div class="left">left<br/>
            left<br/>
            left<br/>
            left<br/>
        </div>
        <div class="right">left</div>
    </div>
</body>
</html>

效果图

静颍流年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三列布局

三列布局：两边固定，当中自适应；中间列要完整地显示；中间列要优先加载。分类：圣杯布局：利用父容器的左右内边距+两个从列相对定位。浮动：搭建完整的布局框架。 margin为负值：调整旁边两列的位置。（margin为负值将元素的边界往里收） ...
复制链接

扫一扫