三栏布局的实现圣杯模式

三栏布局也叫双飞翼布局

  • 三列布局,中间宽度自适应,两边定宽;

  • 中间栏要在浏览器中优先展示渲染;

  • 允许任意列的高度最高;

  • 主要有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>
<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{
            /* 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="container">
          <div id="center" class="">center</div>
          <div id="left" class="column">left</div>
          <div id="right" class="column">right</div>
        </div>
        <div id="footer">footer</div>

</body>

</html>
  

猜你喜欢

转载自www.cnblogs.com/guyuedashu/p/11745911.html
今日推荐