Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "what are the ways to achieve the three-column layout of HTML", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "what is the realization of the three-column layout of HTML?" this article can help you solve your doubts.

The effect to be achieved is a three-column layout with a width of 200px at both ends, fixed and adaptive in the middle.

The Holy Grail layout.

It is realized by floating and relative positioning.

Html code

The layout of the Grail

Holy Grail layout left

The Grail layout right

Css code

.left

.middle

.right {

Position: relative

Float: left

}

.container {

Padding:0 200px 0 200px

Overflow: hidden

}

.container div {

Height: 100px

}

.left, .right {

Width: 200px

Background: red

}

.left {

Margin-left:-100%

Left:-200px

}

.right {

Margin-left:-200px

Right:-200px

}

.middle {

Width: 100%

Background: blue

}

Double wing layout

The layout is similar to that of the Holy Grail, except that there is a difference in the way in which the middle part is adapted, which is nested with an div.

Html code

In the double wing layout.

Double wing layout left

Double wing layout right

Css code

.left

.center

.right {

Float: left

Height: 100px

}

.left {

Margin-left:-100%

Width: 200px

Background: red

}

.right {

Margin-left:-200px

Width: 200px

Background: red

}

.center {

Width: 100%

Background: green

}

. center-inner {

Margin-left: 200px

Margin-right: 200px

}

The above layout methods are all implemented by the traditional css standard. Three other implementation methods (flex,grid,calc ()) are introduced below.

Flex

Use the element attribute of flex to realize. The flex of an element attribute is a compound attribute. Flex:flex-grow | flex-shrink | flex-basis; are the magnification ratio of sufficient space, the reduction ratio of insufficient space and the width value before calculating the remaining space.

Please refer to Ruan Yifeng's article: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Html code

Css code

.flex {

Display: flex

}

.flex div {

Height: 50px

}

.l, .r {

Background-color: yellow

Flex:0 0 200px

}

.c {

Flex:1

Background-color: red

}

Grid

Grid is a web layout solution proposed by Microsoft, and the latest Safari,Chrome,Firefox has been supported. Personally, the grid layout is more powerful than the flex layout and can be controlled in both directions of width and height. Grid is also easier to understand.

Html code

Css code

.grid {

Display: grid

Grid-template-columns: 200px auto 200px

Grid-template-rows:100px

}

.l, .r {

Background-color: red

}

.c {

Background-color: pink

}

The calc () function of css3

The calc () function provided by css3 can set dynamic values for width, height, etc. Support +-* / four operations. Note that there is a space on both sides of the operator. Otherwise, the setting is invalid.

You also need to set up a float to display the three elements side by side. If you do not want to set floating, you can set a single internal div to inline-block; at the same time, in order to cancel the html display gap caused by line wrapping. You need to set the font of the outermost box to 0, namely .calc {font-size:0}.

Html code

Css code

.calc div {

Float: left

Height: 50px

}

.l, .r {

Width:200px

Background-color: red

}

.c {

Width:calc (100%-400px)

Background-color: green

}

After reading this, the article "what is the implementation of the three-column layout of HTML?" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.