三列布局

最新推荐文章于 2022-07-25 12:16:07 发布

绮逾依

最新推荐文章于 2022-07-25 12:16:07 发布

阅读量262

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_44030304/article/details/108101813

版权

一. 三列布局的要求

两边固定，中间自适应
中间列要完整显示
中间列要优先加载

二. 三列布局的实现

圣杯布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        body {
            min-width: 600px;
        }

        .clearfix::before,
        .clearfix::after {
            content: " ";
            display: table;
            clear: both;
        }

        #header,
        #footer {
            height: 20px;
            text-align: center;
            border: 1px solid deeppink;
            background-color: gray;
        }

        #content {
            overflow: hidden;
            padding: 0 200px;
        }

        #contenr .middle,
        #content .left,
        #content .right {
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }

        #content .middle {
            float: left;
            width: 100%;
            background-color: pink;
        }

        #content .left {
            float: left;
            width: 200px;
            background-color: yellow;
            margin-left: -100%;
            position: relative;
            left: -200px
        }

        #content .right {
            float: left;
            width: 200px;
            background-color: yellow;
            margin-left: -200px;
            position: relative;
            right: -200px;
        }
    </style>
</head>

<body>
    <div id="header">header</div>
    <div id="content" class="clearfix">
        <div class="middle">
            <h4>middle</h4>
            <h4>middle</h4>
            <h4>middle</h4>
            <h4>middle</h4>
            <h4>middle</h4>
            <h4>middle</h4>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div id="footer">footer</div>
</body>

</html>

双飞翼布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        body {
            min-width: 600px;
        }

        .clearfix::before,
        .clearfix::after {
            content: " ";
            display: table;
            clear: both;
        }

        #header,
        #footer {
            height: 20px;
            text-align: center;
            border: 1px solid deeppink;
            background-color: gray;
        }

        #content {
            overflow: hidden;
        }
        
        #content .middle .m_inner{
            padding: 0 200px;
        }

        #contenr .middle,
        #content .left,
        #content .right {
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }

        #content .middle {
            float: left;
            width: 100%;
            background-color: pink;
        }

        #content .left {
            float: left;
            width: 200px;
            background-color: yellow;
            margin-left: -100%;
        }

        #content .right {
            float: left;
            width: 200px;
            background-color: yellow;
            margin-left: -200px;
        }
    </style>
</head>

<body>
    <div id="header">header</div>
    <div id="content" class="clearfix">
        <div class="middle">
            <div class="m_inner">
                <h4>middle</h4>
                <h4>middle</h4>
                <h4>middle</h4>
                <h4>middle</h4>
                <h4>middle</h4>
                <h4>middle</h4>
            </div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div id="footer">footer</div>
</body>

</html>

三. 两种实现方式的异同

两种布局方式都是把主列放在文档流的最前面，使主列优先加载
两种布局方式在实现上有相同之处，都是让三列浮动，通过外边距为负形成三列布局
两种布局方式的不同之处在于如何处理中间主列的位置
(1) 圣杯布局是利用父容器的左、右内边距+两个从列相对定位
(2) 双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整

绮逾依

关注

0
点赞
踩
1

收藏

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

一. 三列布局的要求两边固定，中间自适应中间列要完整显示中间列要优先加载二. 三列布局的实现圣杯布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume
复制链接

扫一扫