Css-classic three-column layout

Learned the front end for so long, has never seriously studied the layout, has always designed or imitated other people's web pages. I read a lot of blogs and articles online this time.

Understand the common three-column layout, the so-called three-column layout, nothing more than the left, middle, and right three columns horizontally.

The summary here is mainly expressed in the form of code, and there are some blog links that I have seen to explain better:

floatLayout

, fixed on both sides, intermediate adaptive.

.left{
    Width: 100px;
    Height: 200px;
    Background-color: yellow;
    Float: left;
}
.right{
    Width: 100px;
    Height: 200px;
    Background-color: pink;
    Float: right;
}
.center{
     Background-color: red;
     Height: 200px;
     Margin-left: 120px; // the distance from the left border to the left The size of the entire element is the width of the entire box
     Margin-right: 120px;
}<div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>

这里写图片描述 对于设置float的元素,会脱离文档流,center盒子会无视这个元素,整个元素的大小会包括浮动的区域即Support full box. (But the text in the center box will give the element a to surround it around the floating element) Disadvantages: The middle part is finally loaded, and the content is affected when the content is more

BFC rule

BFC does not overlap with the floating element. Setting the center to BFC can make its width become adaptive width.

.center{
     background-color: red;
     height: 200px;
     margin-left: 120px;  
     margin-right: 120px;
     overflow: hidden;
}

plus overflow: hidden; the result is the same as above.

圣杯Layout

The display effect of the page: fixed width on both sides, the middle container is adaptive (according to the container size).

Implementation: The left, middle and right columns are floated by float, and then the left and right columns are adjusted by a negative margin. The outermost setting margin makes the middle column content not covered.

(In the actual development, it is often used to divide the function area. The left side is a navigation menu, the right side is a list of advertisements or articles, and the middle is the main content display area.)

body{
    min-width: 640px; /* 2*220px+200px ?*/
}
.box{
    padding: 0 220px 0 200px;  //!!
}
.middle{
    width: 100%;
    height: 200px;
    float: left;
    background-color: red;
}
.left{
    width: 200px;
    height: 200px;
    float: left;
    margin-left: -100%;
    position: relative;  //!
    left: -200px;  //!
    background-color: yellow;
}
.right{
    width: 220px;
    height: 200px;
    float: left;
    margin-left:-220px;
    position: relative;
    right: -220px;
    background-color: pink;
}

<div class="box">
        <div class="middle"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

If there is anything that does not understand You can refer to the link, there is a detailed explanation:

双飞翼Layout

The effect is the same as the Holy Grail mode, but the way to solve the problem of occlusion of the middle bar is different.

Since the contents of the middle bar section will be occluded, add a div inside the middle and avoid partial occlusion by setting its margin.

body{
    min-width: 640px; /* 2*220px+200px */
}
.middle{
    width: 100%;
    float: left;    
}
.box-inner{
    margin-left: 200px; //!
    margin-right: 220px;  //!
    height: 200px;
    background-color: red;
}
.middle::after {  //? After the middle to clear the floating display: block;
        Content:'';
        font-size: 0;
        height: 0;
        clear: both;
        zoom: 1;
}
.left{
    width: 200px;
    height: 200px;
    float: left;
    margin-left: -100%;
    background-color: yellow;
}
.right{
    width: 220px;
    height: 200px;
    float: left;
    margin-left:-220px;
    background-color: pink;
}

<div class="box">
        <div class="middle">
            <div class="box-inner">May you run for a long time, come back to meet the teenager. Don't forget your heart, you have to always. </div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

Unprocessed middle bar occlusion problem: 这里写图片描述 处理后的显示结果: 这里写图片描述

The following article details the difference between the Holy Grail layout & the double-wing layout:

flexLayout

flex layout is now subject to More and more front-end personnel love, so it is very important to master the flex layout. Here I also have the [css-flex layout] summarized earlier. If you don't understand the layout, you can look at it first.

flex: flex-grow flex-shrink flex-basis;

.box{
    display:flex;
}
.middle{
    height: 200px;
    background-color: red;
    flex-grow: 1; /* is full of remaining space*/
}
.left{
    Height:200px;
    order:-1; /* put left at the front */
    Background-color: yellow;
    Flex:0 1 200px;
}
.right{
    height: 200px;
    background-color: pink;
    flex:0 1 200px;
}

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

Absolutely positioned

<style type="text/css">
        .middle {
            position: absolute;
            left: 200px;
            right: 200px;
            height: 200px;
            background-color: red;
        }

        .left {
            position: absolute;
            left: 0px;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

        .right {
            position: absolute;
            right: 0px;
            width: 200px;
            background-color: pink;
            height: 200px;
        }
    </style>
</head>

<body>
    <p class="box">
        <p class="middle"> I hope that you will leave for a long time and come back to meet the teenager. Don't forget your heart, you have to always.</p>
        <p class="left"></p>
        <p class="right"></p>
    </p>
</body>