聖盃佈局經常使用兩種方法

時間 2020-08-01

標籤佈局經常使用兩種方法简体版

原文原文鏈接

聖盃佈局經常使用兩種方法

首先搭建起始HTML結構及設置基本css樣式

<body>
   <div class="header">header</div>
   <div class="main">
       <div class="content">content</div>
       <div class="left">left</div>
       <div class="right">right</div>
   </div>
   <div class="footer">footer</div>
</body>

<style>
       * {
           margin: 0;
           padding: 0;
       }
       .header,.footer {
           height: 100px;
           background: #000;
           color:seashell;
       }
       .main {
           height: 400px;
           background: #ccc;
       }
       .content {
           height: 400px;
           background: #f90;
       }
       .left {
           width: 300px;
           height: 400px;
           background: purple;
       }
       .right {
           width: 300px;
           height: 400px;
           background: seagreen;
       }
   </style>

要實現的效果圖以下：

1.經典方法（浮動）

<style>
       * {
           margin: 0;
           padding: 0;
       }
       .header,.footer {
           height: 100px;
           background: #000;
           color:seashell;
       }
       .main {
           height: 400px;
           background: #ccc;
       }
       .content {
           height: 400px;
           background: #f90;
           float: left;
           width: 100%;
       }
       .left {
           width: 300px;
           height: 400px;
           background: purple;
           float: left;
           margin-left: -100%;
       }
       .right {
           width: 300px;
           height: 400px;
           background: seagreen;
           float: left;
           margin-left: -300px;
       }
   </style>

這個方法中首先在main這個父盒子中不按常規的思惟，將content放在最上面（常規思惟應該是left在最上面），這也是這個方法的妙處之一。首先main裏面的三個盒子都設置爲左浮動，而後設置content的width爲100%，最後用margin-left將left和right兩個盒子分列content左右，也就實現了聖盃佈局。css

2.flex佈局

<style>
       * {
           margin: 0;
           padding: 0;
       }
       .header,.footer {
           height: 100px;
           background: #000;
           color:seashell;
       }
       .main {
           height: 400px;
           background: #ccc;
           display: flex;
       }
       .content {
           height: 400px;
           background: #f90;
           flex: auto;
       }
       .left {
           width: 300px;
           height: 400px;
           background: purple;
           flex: none;
       }
       .right {
           width: 300px;
           height: 400px;
           background: seagreen;
           flex: none;
       }
   </style>