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

【div+css】div ul li 嵌套后解決高度自適應方法 

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

<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下測試正常

做服務最好的網絡公司:臨沂網絡公司http://www.kavmzq.shop
更多
臨沂網站建設豪華團隊!www.kavmzq.shop
臨沂網絡公司

炫維網絡 www.kavmzq.shop
建站咨詢電話:18605391786  郵箱:[email protected]  
地址:山東省臨沂市蘭山區通達路367號 裕城大廈   
  
足球比分007球探比分即时足球比分 6十1走势图带坐标连线 昆山同城百搭麻将 皇冠比分lm0 2012上证指数分析 安徽11选5走势 广东快乐10分钟走 微信红包群麻将金花 海南麻将技巧 电竞比分直播彩虹六号 韩国对德国比分预测搜狐 网上炒金 云南期货配资公司 河内5分彩是正规的吗 即时比分即时指数比较 民生银行股票 篮球比分网捷报比分