Div ul Li nested use in the Web page layout is very common, the most important question is how to solve the increase of multiple li after the div height automatic adaptation problem, this article has a good example, can solve this problem, you can try to run the next
Copy Code code as follows:
<body bgcolor= "#0B3D82" >
Div ul Li nested after the resolution of highly adaptive Method:
The HTML code is as follows
Copy Code code as follows:
<div class= "Main_div" >
<ul>
<li><a href= "#" ><img src= "images/img.gif" width= "" height= ""/><span class= "front12_" Arial ">daugli-1webserver-1web server</span></a></li>
<div style= "Clear:both;" ></div>
<ul>
<div class= "Main_div" >
The CSS code is as follows
Copy Code code as follows:
. main_div {
width:80%;
margin-top:15px;
margin-right:26px;
margin-bottom:15px;
margin-left:26px;
}
. Main_div ul {
min-height:205px;
Height:auto;
}
. main_div Li {
Float:left;
Text-align:center;
height:170px;
width:130px;
border:1px solid #CCC;
margin-right:10px;
margin-bottom:15px;
padding:10px;
}
Objective: To Add multiple Li, the div height automatically adapts.
train of thought: define Li height is absolute value 205px, define UL height is automatic {min-height:205px; height:auto;} main_div height is empty
Note:
1. min-height:205px; Height:auto; Meaning for minimum height of 205, more than later adaptive
2. Increase <div style= "clear:both;" ></div> Clear Line Wrapping
3. This example is tested under IE6 and chrome under normal