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.
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
<html xmlns= "http://www.w3.org/1999/xhtml"
<head>
<meta http-equiv= "Content-type" content= "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>
</head>
<body>
<div id= "MainContent" >
<div id= "Header" > this is Head </div>
<div id= "Content" >
<ul>
<li> this is left </li>
<li id= "li2″>
<ul>
<li> This is the middle of the upper </li>
<li> This is the middle of the lower part </li>
</ul>
</li>
<li> This is right </li>
</ul>
</div>
<div id= "Footer" > This is the bottom </div>
</div>
</body>
</html>
This code in the IE7 and FF3 can be normal display, other browsers do not test, if you have a better way to propose.
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
