How to realize the self-adaptive layout of the middle column content in the left and right columns, that is, the highly adaptive layout with the middle content.
This article mainly explains "how to realize the layout of the left and right adaptive middle columns, that is, highly adaptive with the middle content." Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "how to realize the layout of the left and right two adaptive middle columns, that is, highly adaptive with the middle content"!
The code is as follows:
test
body{margin:0; padding:0;}
table,tr,td{margin:0; padding:0; vertical-align:top; border-collapse:collapse; border:1px solid #FFFFFF}
#left,#center,#right{padding:10px; font:15px/180% bold "Song Ti"; color:#FFFFFF}
#left{ width:200px;background-color:#663399}
#center{ background-color:#006600;}
#right{ width:200px; background:#0066CC}
leftside
cente
Table+ CSS layout
1. The content on both sides may be highly adaptive with the content in the middle.
2. The middle content can also adapt to the height of the content on both sides.
3. The content on both sides has a fixed width, and the middle is not set wide, but the entire table is set with 100% variable width.
So the middle content adapts automatically to change.
4. Another point is to set the TD vertical-align:top; this way it looks like it is from top to bottom.
subarranged
5. This method of table layout is easier to accept in principle than pure div+css layout.
The only downside of the layout is that it doesn't get along well with seo because of the search engine's ability to grab div
Much better than a table.
6. Tested in IE 6.0, FF 3,Opera,Netscape Navigator, Google Chrome display is consistent.
rightside6. Tested in IE 6.0, FF 3,Opera,Netscape Navigator, Google Chrome display is consistent
At this point, I believe everyone has a deeper understanding of "how to realize the layout of the left and right adaptive middle columns, that is, highly adaptive with the middle contents." It is advisable to actually operate it. Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!
