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

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!

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.