I suddenly thought of this method when I was writing a three-column layout in CSS for a few days. I felt a little crazy about this idea. If there is anything wrong with it, please give me some advice.
When I need to write a three-column layout, I will generally choose to use the following DIV layout method:
Figure 1 DIV layout
Using such nesting methods can undoubtedly reduce the probability of code errors a lot, but at the same time, such a layout is a bit complicated and is slightly inconvenient for later maintenance. When we layout navigation, we often use a method, which is to use the 〈ul〉 list to layout, and navigation can be described as a multi-column layout. Since this is the case, we can also use 〈ul〉 to layout the page multiple columns.
Figure 2 DIV layout
This is a fixed-width layout, which means that the liquidity is not strong. The liquidity layout has not been tested yet. I will try it when I have time. The following is the code for this layout:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8″ />
<title>Use UL for multi-column layout</title>
<style type=text/css>
* {margin:0; padding:0;}
body {
width:100%;
height:100%;
background:#ddedfb;
}
#mainContent {
width:600px;
margin:10px auto;
}
#header,#footer {
background:#8AC7FA;
height:80px;
clear: both;
}
#footer {
clear: both;
padding-top:10px;
}
#content {
height:300px;
margin:10px auto;
}
#content ul {
list-style:none;
height:100%;
}
#content ul li {
width:150px;
height:100%;
background:#8AC7FA;
float:left;
}
#content ul li#li2 {
width:280px;
margin:0 10px;
}
#content ul li#li2 ul li {
width:270px;
height:140px;
margin:5px;
background:#0581F0;
}
</style>
</head>
<body>
<div id=mainContent>
<div id=header>This is the head</div>
<div id=content>
<ul>
<li>This is the left</li>
<li id=li2″>
<ul>
<li>This is the upper part of the middle</li>
<li>This is the lower part in the middle</li>
</ul>
</li>
<li>This is the right</li>
</ul>
</div>
<div id=footer>This is the bottom</div>
</div>
</body>
</html>
This code can be displayed normally under IE7 and FF3. Other browsers have not tested it. If you have a better method, you might as well propose it.