前端三欄佈局

時間 2019-11-13

標籤前端佈局简体版

原文原文鏈接

聖盃佈局：html

<!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;
        }

        .wrapper {
            padding: 0 100px;
            overflow: hidden;
        }

        .middle,
        .left,
        .right {
            float: left;
            position: relative;
        }

        .middle {
            width: 100%;
            height: 200px;
            background: red;
        }

        .left {
            width: 100px;
            height: 100px;
            background: yellow;
            margin-left: -100%;
            left: -100px;
        }

        .right {
            width: 100px;
            height: 100px;
            background: blue;
            margin-left: -100px;
            right: -100px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="middle"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

1.三欄佈局，中間內容區（middle）放在最前面，由於最早渲染，設置width：100%，給left和right設置寬、高、顏色app

2.middle，left，right同時設置float：left，此時會出現如下狀況佈局

3.咱們須要把left和right放到左右兩邊，利用負邊距，left設置margin-left：-100%，right設置margin-left：-100pxflex

4.這時位置正確了，可是覆蓋了middle，須要給三者的父級加一個padding：0 100px，留出left和right的位置，而後設置left：-100px，right：-100px，最後還須要給三者加一個共同屬性position：relative定位ui

雙飛翼佈局：spa

1.與聖盃佈局最大的區別是解決內容覆蓋的方式不一樣。code

2.去掉共同的父級wrapper，給middle加一個父級middle-wrap，屬性設置爲margin：0 100px，同時取消三者共同屬性position：relative，也不用給left和right去調整位置。htm

<!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;
        }

        .middle,
        .left,
        .right {
            float: left;
        }

        .middle {
            width: 100%;
            height: 200px;
            background: red;

        }

        .middle-wrap {
            margin: 0 100px;
        }

        .left {
            width: 100px;
            height: 100px;
            background: yellow;
            margin-left: -100%;

        }

        .right {
            width: 100px;
            height: 100px;
            background: blue;
            margin-left: -100px;

        }
    </style>
</head>

<body>
    <div class="middle">
        <div class="middle-wrap">
            奧克蘭的加拉時間到拉薩的驕傲了斯柯達就愛上了肯德基阿喀琉斯拉克絲建檔立卡是以爲卡收到卡時間不少卡就是電話卡接收到卡薩丁黃金卡速度哈空間收到貨
        </div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>

</html>

flex佈局：blog

只需按照left，middle，right排列it

<!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>flex佈局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrapper {
            display: flex;
        }

        .left {
            flex-basis: 100px;
            height: 100px;
            background: blue;
        }

        .middle {
            flex: 1;
            height: 200px;
            background: red;

        }

        .right {
            flex-basis: 100px;
            height: 100px;
            background: blue;

        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。