Use CSS to achieve three-column adaptive layout (fixed width on both sides, adaptive in the middle)
|
The so-called three-column adaptive layout means that the width of the two sides is fixed and the width of the middle block is adaptive. This question was also asked during the interview for front-end engineers at NetEase this year. I mainly divide it into two categories here, one is based on the traditional implementation of position, and the other is based on the new feature of CSS3, the elastic box model layout implementation. 1. Layout based on traditional attributes such as position and margin There are also three methods here, namely absolute positioning, holy grail layout, and self-floating. 1). Absolute positioning method The principle of absolute positioning is to use absolute positioning on the left and right sides. Because absolute positioning makes it out of the document flow, the center behind it will naturally flow onto them. Then use the margin attribute to leave the width of the left and right elements, so that the middle element can adapt to the screen width. The code is as follows: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>layout_box</title> <link rel="stylesheet" type="text/css" href="../css/layout_box.css"> </head> <body> <h3>Achieve three-column width adaptive layout</h3> <div id = "left">I am on the left</div> <div id = "right">I am on the right</div> <div id = "center">I am in the middle</div> </body> </html> CSS code:
html,body{ margin: 0px;width: 100%; }
h3{height: 100px;margin:20px 0 0;}
#left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}
#left{left:0px;}
#right{right: 0px;}
#center{margin:2px 210px ;background-color: #eee;height: 200px; }
The advantage of this layout method is that the order of the three divs can be changed arbitrarily. The disadvantage is that due to absolute positioning, if there is other content on the page, the top value needs to be handled with care. It is best to initialize the CSS style, just like adding a title in the above example. If the style is not initialized, the values on both sides and the middle will not be aligned. In addition, as the browser window shrinks, compression will occur when it is less than 200px. 2). Use the self-floating method The principle of the self-floating method is to use float:left and float:right for the left and right elements respectively. Float makes the left and right elements out of the document flow, and the middle element is normally in the normal document flow. Margin is used to specify the left and right margins to position it. HTML code: <h3>Use self-floating method for positioning</h3> <div id = "left_self">I am on the left</div> <div id = "right_self">I am on the right</div> <div id = "center_self">I am in the middle</div> CSS code:
#left_self,#right_self{ width: 200px;height: 200px; background-color: #ffe6b8 }
#left_self {float: left;}
#right_self{float: right;}
#center_self{margin: 0 210px;height: 200px; background-color: #a0b3d6}
The advantage of this layout method is that it is less affected by external factors, but its disadvantage is the order of the three elements. Center must be placed last. This is different from absolute positioning. Center occupies the document flow position, so it must be placed last. The positions of the left and right elements have nothing to do with each other. When the browser window is small, the right element will be knocked down to the next line. 3). Holy Grail Layout The principle of the Holy Grail layout is the negative margin method. To use the Holy Grail layout, you first need to include a div outside the center element. The included div needs to set the float attribute to form a BFC and set the width. This width must be coordinated with the negative margin value of the left block. For the specific principle, refer to here. The Holy Grail layout is explained in great detail here. Implementation code: <h3>Use negative margins for layout</h3> <div id = "wrap"> <div id = "center"></div> </div> <div id = "left_margin"></div> <div id = "right_margin"></div> CSS code:
#wrap{ width: 100%; height: 100px; background-color: #fff; float: left;}
#wrap #center{ margin:0 210px; height: 100px; background-color: #ffe6b8; }
#left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }
#left_margin {margin-left: -100%; background-color: lightpink}
#right_margin{margin-left: -200px;}
This method is very common in website layout and is often tested in interviews. The advantage is that the three columns are interrelated and have a certain degree of resistance. It should be noted that the middle part of the layout must be placed in the front, and the order of left and right is not restricted. For the left margin, the negative value must be equal to the wrap width.
2. New features of CSS3 Wrap a div around the outside and set it to display:flex; set flex:1 in the middle; but the box model is tightly attached by default, and you can use margin to control the outer margin. Code: <div id = "box"> <div id = "left_box"></div> <div id = "center_box"></div> <div id = "right_box"></div> </div> CSS style:
#box{width:100%;display:flex;height:100px;margin:10px;}
#left_box,#right_box{width: 200px;height: 100px; margin: 10px; background-color: lightpink}
#center_box{ flex:1; height: 100px;margin: 10px; background-color: lightgreen}Note: center must be placed in the middle. The effect diagram is as follows:
There are many other features of CSS layout. The next step is to study floating, and then study position and display attributes. This concludes this article on how to use CSS to achieve a three-column adaptive layout (fixed width on both sides, adaptive in the middle). For more relevant CSS three-column adaptive layout content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future! |
<<: Calling the search engine in the page takes Baidu as an example
>>: Tips for using DIV container fixed height in IE6 and IE7
Recommend
How to load Flash in HTML (2 implementation methods)
First method : CSS code: Copy code The code is as ...
Summary of how to modify the root password in MySQL 5.7 and MySQL 8.0
MySQL 5.7 version: Method 1: Use the SET PASSWORD...
Detailed explanation of the underlying implementation of descending index, a new feature of MySQL 8
What is a descending index? You may be familiar w...
Solution to the blank page after vue.js packaged project
I believe that many partners who have just come i...
18 Amazing Connections Between Interaction Design and Psychology
Designers need to understand psychology reading n...
Issues and precautions about setting maxPostSize for Tomcat
1. Why set maxPostSize? The tomcat container has ...
How to redirect URL using nginx rewrite
I often need to change nginx configuration at wor...
MySQL backup table operation based on Java
The core is mysqldump and Runtime The operation i...
CSS to achieve the image hovering mouse folding effect
CSS to achieve the image hovering mouse folding e...
CentOS 6 Compile and install ZLMediaKit analysis
Install ZLMediaKit on centos6 The author of ZLMed...
Several ways to generate unique IDs in JavaScript
Possible solutions 1. Math.random generates rando...
Super detailed MySQL8.0.22 installation and configuration tutorial
Hello everyone, today we are going to learn about...
Implementation of docker redis5.0 cluster cluster construction
System environment: Ubuntu 16.04LTS This article ...
mysql group by grouping multiple fields
In daily development tasks, we often use MYSQL...
A brief discussion on which fields in Mysql are suitable for indexing
Table of contents 1 The common rules for creating...