CSS頁面佈局-float,flex,table,grid

時間 2019-11-21

標籤 css 頁面佈局 float flex table grid 欄目 CSS 简体版

原文原文鏈接

本篇文章，我將採用上述幾種不一樣的方式，來實現下面的六種佈局css

1. 佈局展現

2. float

2.1 float 實現左右佈局

<style> body{margin:0; padding: 0;} .left{ width: 300px; height: 500px; float: left; background-color: cornflowerblue; } .right{ height: 500px; margin-left: 300px; background-color: coral; } </style>
<body>
   <div class="main">
       <div class="left">Left</div>
       <div class="right">Right</div>
   </div>
</body>
複製代碼

2.2 float + positon 實現左中右佈局

<style> body{margin: 0;padding: 0;} .left{ width: 200px; height: 500px; float: left; background-color: cornflowerblue; } .main{ height: 500px; margin: 0 300px 0 200px; background-color: darkgoldenrod; } .right{ width: 300px; height: 500px; position: absolute; right: 0; top: 0; background-color: darkseagreen; } </style>
<body>
    <div class="left">Left</div>
    <div class="main">Main</div>
    <div class="right">Right</div>
</body>
複製代碼

2.3 float實現上左右佈局

<style> .top{ height: 100px; background-color: yellow; } .main{ margin-top: 10px; } .left{ float: left; width: 100px; height: 500px; background-color: yellowGreen; } .right{ height: 500px; margin-left: 110px; background-color: red; } </style>
<body>
    <div class="top">Top</div>
    <div class="main">
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
</body>
複製代碼

2.4 練習

練習一： float實現上左右下佈局html

練習二： float實現上左中右下佈局git

3. Flex

3.1 flex實現左右佈局

<style> .container{ display: flex; } .left{ width: 300px; height: 500px; background-color:cornflowerblue; } .right{ height: 500px; flex: 1; background-color:darkgoldenrod; } </style>
<body>
    <div class="container">
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
</body>
複製代碼

3.2 flex實現左中右佈局

<style> .container{ display: flex; } .left{ width: 200px; height: 500px; background-color:darksalmon; } .main{ height: 500px; flex: 1; margin: 0 10px; background-color:darkorange; } .right{ width: 200px; height: 500px; background-color:darkmagenta; } </style>
<body>
    <div class="container">
        <div class="left">Left</div>
        <div class="main">Main</div>
        <div class="right">Right</div>
    </div>
</body>
複製代碼

3.3 flex實現上左右佈局

<style> .top{ height: 200px; background-color:darkorange; } .container{ display: flex; } .left{ width: 300px; height: 500px; background-color: tomato; } .right{ height: 500px; flex: 1; background-color: yellowGreen; } </style>
<body>
    <div class="top">Top</div>
    <div class="container">
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
</body>
複製代碼