圣杯布局和双飞翼布局的三栏式

最新推荐文章于 2023-05-08 10:10:46 发布

mus_木司

最新推荐文章于 2023-05-08 10:10:46 发布

阅读量147

点赞数

分类专栏：前端面试文章标签： html

本文链接：https://blog.csdn.net/mus123/article/details/107742129

版权

前端面试专栏收录该内容

60 篇文章 6 订阅

订阅专栏

二者都是三栏左右定宽中间自适应的典型布局

圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣杯布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .header,.footer{
            height: 32px;
            background: #444;
            width:100%;
            color: #eee;
            text-align: center;/*水平居中文字*/
            line-height: 32px;
            /* lin-height是为了垂直居中文字 */
        }
        .container{ 
            width: 100%;
            box-sizing: border-box;
            padding-left: 100px;
            padding-right: 200px;
            overflow: hidden;/*形成bfc,因为里面的div块都已经float了*/
        }
        .main{
            width: 100%;
            float: left;
            background-color: dimgray;
            min-height: 300px;
        }
        .left{
            float: left;
            width: 100px;
            background-color: aquamarine;
            margin-left: -100%;/*文档流向左移动一整行*/
            position: relative;
            left: -100px;
            min-height: 200px;
        }
        .right{
            float: left;
            width: 200px;
            background-color: coral;
            margin-left: -200px;/*文档流向左移动一个自己*/
            position: relative;
            left: 200px;
            min-height: 400px;
        }
    </style>
</head>
<body>
    <div class="header">头部</div>
    <div class="container">
        <div class="main">中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间</div>
        <div class="left">左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边</div>
        <div class="right">右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边</div>
    </div>
    <div class="footer">尾部</div>
</body>
</html>

过程就是：

首先头部、正文、尾部上中下通过width：100%分开
正文设置怪异盒模型后给左右padding分别等于left和right的宽度
然后左边中间和正文都是左浮动，且中间放到最前面，中间宽度为100%
这时候第一行只有中间，左边和右边在第二行，正文的左右padding起到作用所以都有一段为空白
然后设置left的margin-left为-100%，让其文档流退一行退到中间内部的最左边，然后使用relative定位让他左移自己的宽度
right部分只需要margin-left为其本身宽度，退到中间内部的最右侧，然后使用relative定位右移自己的宽度

双飞翼布局

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双飞翼布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .header,
        .footer {
            height: 32px;
            background: #444;
            width: 100%;
            color: #eee;
            text-align: center;
            /*水平居中文字*/
            line-height: 32px;
            /* lin-height是为了垂直居中文字 */
        }
        .container {
            width: 100%;
            overflow: hidden;
            /*形成bfc,因为里面的div块都已经float了*/
        }
        .left,.middle,.right{
            float: left;
        }
        .left{
            background-color:aquamarine;
            width: 100px;
            min-height: 200px;
            margin-left: -100%;
        }
        .right{
            background-color:coral;
            width: 200px;
            min-height: 400px;
            margin-left: -200px;
        }
        .middle{
            margin: 0 200px 0 100px;
        }
        .main{
            width: 100%;
            background-color: dimgray;
        }
    </style>
</head>

<body>
    <div class="header">头部</div>
    <div class="container">
        <div class="middle">
            <div class="main">中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间</div>
        </div>
        <div class="left">左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边</div>
        <div class="right">
            右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边</div>
    </div>
    <div class="footer">尾部</div>
</body>

</html>

过程：

和圣杯相比，对于中间块要在外面套一个middle
middle、left、right都进行左浮动
不需要container的padding，代替为middle的左右margin
left直接margin-left为-100%
right直接为margin-left为负的自身宽度

mus_木司

关注

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>圣杯布局</title> <style>
复制链接

扫一扫