7 × 24小時服務熱線:18605391786  4000-999-221  關于我們  聯系我們   付款方式  網站地圖   加為收藏       
您當前的位置:吉林快3 >  新聞中心 > 網頁技巧 > 【div+css】div ul li 嵌套后解決高度自適應方法

吉林快3:【div+css】div ul li 嵌套后解決高度自適應方法 

信息來自:炫維網絡    發布日期:2013-2-1   瀏覽次數:  

吉林快3 www.jeeau.com <body bgcolor="#0B3D82">

 

div ul li 嵌套后解決高度自適應辦法:

html代碼如下

<div class="main_div">
<ul>

<li><a href="#"><img src="images/img.gif" width="80" height="90" /><span class="front12_arial">daugli-1webServer-1web Server</span></a></li>

<div style="clear:both;"></div>

<ul>
<div class="main_div">

 

CSS代碼如下:

.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;
}

 

目的:增加多個li后,DIV高度自動適應。

思路:定義li高度為絕對值 205px,定義ul高度為自動 {min-height:205px;  height:auto;} main_div 高度為 空

注意:
1. min-height:205px;  height:auto; 意思為最小高度為205,超過以后自適應
2. 增加<div style="clear:both;"></div> 清除換行
3. 本例在IE6下和Chrome下測試正常

做服務最好的網絡公司:吉林快3吉林快3
更多
吉林快3豪華團隊!吉林快3
臨沂網絡公司

炫維網絡 吉林快3
建站咨詢電話:18605391786  郵箱:[email protected]  吉林快3
地址:山東省臨沂市蘭山區通達路367號 裕城大廈   
  
{ganrao}