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

This article will explain in detail how to achieve the three-column layout of DIV+CSS. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

1. Width adaptive three-column layout

The principle of three-column layout is the same as that of two-column layout, but with one more column, we only need to add another column to the width-adaptive two-column layout, and then recalculate the width of the three-column layout to realize the width-adaptive three-column layout.

By the same token, the layout of more columns is actually the same as the layout pattern of two columns and three columns.

Three-column layout * {margin:0;padding:0;} # herder {height:50px; background:blue;} # main {width:100%; overflow:hidden;} # main. Main-left {width:25%; height:800px; background:red; float:left;} # main. Main-center {width:50%; height:800px Background:lightgreen; float:left;} # main. Main-right {width:25%; height:800px; background:pink; float:right;} # footer {height:50px; background:gray;} header, left column, middle column, footer

2. The left and right columns have a fixed width, and the middle content width is self-adaptive.

If you want to achieve a layout with fixed width and adaptive middle width between the left and right columns, it is impossible to use floats. After using floats, the page will be messed up, and you must use absolute positioning to fix the three columns in one row.

Fixed on both sides and middle adaptive layout * {margin:0;padding:0;} # herder {height:50px; background:blue;} # main {width:100%; position:relative;} # main. Main-left {width:200px; height:800px; background:red; position:absolute; left:0; top:0 } # main. Main-center {height:800px; background:lightgreen; margin:0 310px 0 210px;} # main. Main-right {width:300px; height:800px; background:pink; position:absolute; right:0; top:0;} # footer {height:50px; background:gray } the first step of designing a web page in the left column of the header is to design the layout, build the structure of the website, and the rationality of web layout, which to a certain extent affects the overall layout of the site and the optimization in the later stage. A good website image can more easily attract and retain users. Therefore, the typesetting of the first screen of the home page of the website is very important, and it can decide whether the user goes or stays in many cases. Footer on the right column on "how to achieve three-column layout DIV+CSS" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

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.