HTML front three column layout

Time:2020-12-5

Three column layout

original intention

It started with my graduation in December last year and went for an interview. After three years of study, I was finally able to get out of the mountain. With incomparable excitement, he cast hundreds of resumes with a shooting rate of 60%. Although the results are still OK, but in the nearly 100 interviews, I really gained a lot. This article is written in the front-end interview to find out my own shortcomings, and to make up for the omissions, so as to make my technology more mature, find out my shortcomings, and understand my shortcomings from them. At the same time, I hope it can also help the people in the river and lake to solve their doubts.

preface

The layout knowledge to be introduced here is mainly several layout solutions to solve the three column layout mode, including the classic Holy Grail layout, double flying wing layout and absolute positioning layout. It also includes the flex layout proposed by W3C in 2009 and the calc calculation function brought by CSS3 to solve the three column layout

Three column layout solution

God cup layout

Origin: in 2006, Matthew Levine published an article entitled “in search of the Holy Grail” in a list apart, proposing the idea of the Holy Grail layout. Using negative margin to achieve the effect we need, fully embodies the art of CSS and the strength of negative margin.

Principle: floating, positioning and negative border are used to realize three column layout with fixed sides and adaptive middle

Specific implementation (using semantic implementation of HTML5 and CSS3)

<body>
    <!-- header start -->
    <header>header</header>
    <!-- header end -->
    <!-- main start -->
    <main>
        <div class="main">main</div>
    <div class="left">left</div>   
    <div class="right">right</div>
    </main>
    <!-- main end -->
    <!-- footer start -->
    <footer>footer</footer>
    <!-- footer end -->
</body>
/* header */
header{
    height: 200px;
    width: 100%;
    background: #5dbb79;
    display: flex;
    justify-content: center;
    align-items: center;

}
/* main */
main{
    padding: 0 200px;
}
main .main{
    float: left;
    width: 100%;
    height:400px;
    background: rgb(73, 182, 176);
    display: flex;
    justify-content: center;
    align-items: center;
}
main .left{
    float: left;
    width: 200px;
    height: 400px;
    margin-left: -100%;
    position: relative;
    left: -200px;
    background: rgb(131, 124, 104);
    display: flex;
    justify-content: center;
    align-items: center;
}
main .right{
    float: left;
    width: 200px;
    height: 400px;
    margin-left: -200px;
    position: relative;
    left: 200px;
    background: rgb(131, 124, 104);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* footer */
footer {
    height: 100px;
    width: 100%;
    Clear: both; / * clear attribute clears floating elements in content*/
    background: rgb(210, 209, 208);
    display: flex;
    justify-content: center;
    align-items: center;
  }

The layout has advantages and disadvantages

Advantages: it can be stretched left and right, and the content area is automatically zoomed, which conforms to the traditional three column layout in the early days
Disadvantages: when zooming to a certain extent, you will find that the whole page structure will be disordered. This problem can be solved by Mi width which can be used in CSS3.

Recommended Today

Go carbon version 1.2.0 has been released to improve and optimize the multi scenario support for orm

Carbon is a lightweight, semantic and developer friendly golang time processing library, which supports chain call, lunar calendar, Gorm, xorm and other mainstream orm If you think it’s good, please give it to a star github:github.com/golang-module/carbon gitee:gitee.com/go-package/carbon Installation and use //Using GitHub Library go get -u github.com/golang-module/carbon import ( “github.com/golang-module/carbon”) //Using gitee Library go get […]