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
Nginx installation error solution
1. Unzip nginx-1.8.1.tar.gz 2. Unzip fastdfs-ngin...
Vue close browser logout implementation example
Table of contents 1. beforeunload event 2. Unload...
How to use vw+rem for mobile layout
Are you still using rem flexible layout? Does it ...
HTML 5.1 learning: 14 new features and application examples
Preface As we all know, HTML5 belongs to the Worl...
Example code of how to implement pivot table in MySQL/MariaDB
The previous article introduced several methods f...
Ten important questions for learning the basics of Javascript
Table of contents 1. What is Javascript? 2. What ...
Detailed explanation of the getBoundingClientRect() method in js
1. getBoundingClientRect() Analysis The getBoundi...
How to use VirtualBox to build a local virtual machine environment on Mac
1. Big Data and Hadoop To study and learn about b...
Example code for implementing multiple line omissions using three methods of advanced CSS
Preface This is an old demand, but there are stil...
Reasons and solutions for MySQL selecting the wrong index
In MySQL, you can specify multiple indexes for a ...
A brief introduction to Linux performance monitoring commands free
When the system encounters various IO bottlenecks...
MySQL performance optimization: how to use indexes efficiently and correctly
Practice is the only way to test the truth. This ...
Detailed explanation of React setState data update mechanism
Table of contents Why use setState Usage of setSt...
JavaScript to achieve lottery effect
This article shares the specific code of JavaScri...
An example of using Dapr to simplify microservices from scratch
Table of contents Preface 1. Install Docker 2. In...