Create a webpage for the customer's home (www.bkjia.com)It is not easy to create a high-profile multi-column layout with pure CSS. This tutorial will focus on analyzing multiple problems that occur in the Multi-column layout, and then provide you with a simple solution that can be used in all browsers, do not use images, scripts, CSS hacks, and pass verification in the strictest XHTML specifications.
The crux of the problem
<STYLE type = text/css>. title {color: # ff7200; font-size: 23px; line-height: 28px} </STYLE>
As shown in, the background height is not uniform due to inconsistent content of each column. The background is actually the content (the standard box model is composed of the content area , Whitelist Area , Border Area And Boundary And the background exists in the first three; IE is the first two. Then, how can we increase the height of those shorter columns so that the height of all columns is equal to the height of the highest column? This is really tricky, because we don't know the height of each column, and we don't know which column is the highest. We cannot simply give all columns a clear height, which may lead to a large margin of white space for all columns, or the lack of height will lead to the failure to display all the content of some columns! In reality, the content length is dynamic, so the height of each column is dynamic. We must realize that there is no "fixed" word in the network. The resolution of each person's display is different, and the browser font size settings are also different, which will affect the display height of the content.
Separate content from background
The first step to Solving High problems is to split it into two smaller ones that can be solved separately. In this way, we use a column to correspond to a DIV, and now a column to correspond to a DIV, a content to be loaded, and a background to be displayed. This separation helps us to control each element and combine them in another more effective way, which will soon be described in the following chapter.
- 6 pages in total:
- Previous Page
- 1
- 2
- 3
- 4
- 5
- 6
- Next Page