三栏布局的实现圣杯模式

时间：2019-10-26 23:05:59 阅读：80 评论：0 收藏：0 [点我收藏+]

三栏布局也叫双飞翼布局

三列布局，中间宽度自适应，两边定宽；
中间栏要在浏览器中优先展示渲染；
允许任意列的高度最高；
主要有margin-left = 100% 可以是其上移一行，，利用了box-sizing = padding + margin + border + cotnent
其实left和right在container的padding上，， margin-left = 100%相对于父类的宽度去移动，，为神马会移上去，，想不通

<!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>布局，圣杯模式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #header,#footer{
            background-color: green;
            text-align: center;
        }
        #container{
            /* width: 100%; */
            padding: 0 150px 0 200px;
            height: 500px;
            background-color:gold;
        }
        .column{
            float: left;
            height: 100%;
            position: relative;
        }
        #center{
            width: 100%;
            background-color: hotpink;
        }

        #right{
            left: 150px;
            width:150px;
            background-color: blue;
            margin-left: -150px;

        }
        #left{
            left: -200px;
            width:200px;
            background-color: royalblue;
            margin-left: -100%;

        }

    </style>

</head>

<body>
        <div id="header">header</div>
        <div id="container">
          <div id="center" class="column">center</div>
          <div id="left" class="column">left</div>
          <div id="right" class="column">right</div>
        </div>
        <div id="footer">footer</div>

</body>

</html>

　　方式二，，双飞翼的实现方式

去掉了 position的定位，left right ,,以及 container的中间padding值，，变成main中子元素的margin上留出空白
多用了一个div

<!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>双飞翼</title>
    <style>
     
        *{
            margin: 0;
            padding: 0;
        }
        body{min-width: 700px;}
        #header,#footer{
            background-color: green;
            text-align: center;
        }
        #container{
            height: 500px;
            background-color:gold;
        }
        .column{
            float: left;
            height: 100%;
     
        }
        #center{
            width: 100%;
            background-color: hotpink;
        }

        #right{
         
            width:150px;
            background-color: blue;
            margin-left: -150px;

        }
        #left{
            /* left: -200px; */
            width:200px;
            background-color: royalblue;
            margin-left: -100%;

        }
        .sub{
            margin: 0 150px 0 200px;
        }

    </style>
</head>
<body>
        <div id="header">header</div>
        <div id="container">
          <div id="center" class="column"><div class="sub">center</div></div>
          <div id="left" class="column">left</div>
          <div id="right" class="column">right</div>
        </div>
        <div id="footer">footer</div>
</body>
</html>

　flex布局

　　　　阮一峰Flex详解实例篇

　　　　绝对定位也可以实现，

<!DOCTYPE html>

<head>

<style>

* {

margin: 0;

padding: 0;

}

body{min-width: 700px;}

#header,#footer{

background-color: green;

text-align: center;

}

#container{

/* width: 100%; */

height: 500px;

background-color:gold;

position: relative;

}

.column{

position: absolute;

height: 100%;

top: 0;

}

#center{

margin:0 150px 0 200px;

/* width: 100%; */

background-color: hotpink;

height: 100%;

}

#right{

right: 0;

width:150px;

background-color: blue;

}

#left{

left: 0;

width:200px;

background-color: royalblue;

}

</style>

</head>

<body>

<div id="header">header</div>

<div id="center" class="">center</div>

<div id="right" class="column">right</div>

</div>

<div id="footer">footer</div>

</body>

</html>

三栏布局的实现圣杯模式

原文：https://www.cnblogs.com/guyuedashu/p/11745911.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)