a few days in the three columns with CSS layout of the sudden thought of such a method, the idea of their own feel a little crazy, if there is anything wrong in the place please you feel free.
When you need to write a three-column layout, I usually choose to use the following div layout:
The use of such a nested way can undoubtedly make the code error probability of a lot less, but at the same time the layout is slightly complicated, for later maintenance also slightly inconvenient. We often use a method for layout navigation, which is to use the <ul> list for layout, and navigation can be described as a multiple-column layout, so we can use <ul> to do a multiple-column layout of the page.
This is a fixed-width layout, that is, mobility is not strong, the flow of the layout has not yet been tested, and so have time to try again, the following paste the layout of the code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
<meta http-equiv= "Content-type" Content= "text/html; Charset=utf-8″/>
<title> Use UL to </title> the layout of multiple columns;
<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>
<body>
<div id= "maincontent"
<div I D= "Header" > This is the head </div>
<div id= "content"
<ul>
<li> this is left </li>
<li Id= "Li2″>
<ul>
<li> This is the middle upper </li>
<li> This is the middle lower </li>
</ul>
</li>
<li> This is right </li>
</ul>
</div>
<div id= "Footer" > This is the bottom </div
</div>
</body>
This code can be displayed properly under IE7 and FF3, and other browsers are not tested, if you have a better way to put it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
