css 聖杯布局三種方式


         所謂的聖杯布局就是左右兩邊大小固定不變,中間寬度自適應。我們可以用浮動、定位以及flex這三種方式來實現

     一般這種布局方式適用於各種移動端頂部搜索部分,這是最常見的,如京東手機版主頁面頂部搜索:

                                                

可以看到左邊有個菜單按鈕,中間是搜索框,右邊是登錄兩個文字,左右大小是固定的,而中間部分則是隨着手機屏幕尺寸的大小而自適應。

  第一種方法 float實現:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     
 6     <title>Document</title>
 7     <style type="text/css">
 8     *{
 9         margin: 0;
10         padding: 0;
11         color: black;
12         font-size: 45px
13     }
14     .main>div{
15         float: left;
16     }
17     .main{
18        width: 100%;
19        background: yellow
20     }
21     .center{
22         background: red;
23         margin-left: 200px;
24         margin-right: -200px;
25         width: 100%
26     }
27     .left{
28        background: pink ;
29        width: 200px;
30        margin-left: -100%
31     }
32     .right{
33        background: blue ;
34        width: 200px;
35        margin-right: -200px
36     }
37 </style>
38 </head>
39 <body>
40     <div class="main">
41         <div class="center">中間</div>
42         <div class="left">左邊</div>
43          <div class="right">右邊</div>
44     </div>
45 
46 </body>
47 </html>

第二種 position實現:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
        color: black;
        font-size: 45px
    }
    .main div{
        box-sizing: border-box;
    }
    .main{
       width: 100%;
       background: red;
       position: relative;
       padding-left: 200px;
       padding-right: 200px;
    }
    .center{
        width: 100%;
        background: pink
    }
    .left{
       background: yellow ;
       width: 200px;
      position: absolute;
      left: 0;
      top: 0;
    }
    .right{
       background: blue ;
       width: 200px;
        position: absolute;
      top: 0;
      right:0
    }
</style>
</head>
<body>
    <div class="main">
        <div class="center">z中間</div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>

</body>
</html>

第三種 flex實現:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin:0;padding:0;
    }
    .container{
        display: flex;
        height: 100vh;
        flex-direction: column;
    }
    header{
        background: #000;
    }
    section{
        flex:1;
        background: pink;
        display: flex;
    }
    footer{
        background: #000;
    }
    .left{
        background: red;
        flex:0 0 100px;
    }
    .center{
        flex:1;
        background: blue;
    }
    .right{
        flex:0 0 100px;
        background: red;
    }
    </style>
</head>
<body>

<div class='container'>
        
    <header>頭部</header>
    <section>
        <div class='left'>左</div>
        <div class='center'>中</div>
        <div class='right'>右</div>
    </section>
    <footer>底部</footer>

</div>
    
</body>
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM