今天我們來看看圖片用div怎麼排列多行多列的情況,如下圖的效果
| 代碼如下 |
複製代碼 |
<div id="firstContent1">
<div id="AnLiLeft" class="floatLeft">
<div class="AnLiPic">
<div><a href="" target="_blank"><img src="ProImage/00000366_s.jpg" alt="網盈網路網站建設經典案例--長沙亨通母嬰用品有限公司" width="146" height="91" border="0" /></a></div>
<div class="AnLiText"><a href="" target="_blank" title="長沙亨通母嬰用品有限公司">長沙亨通母嬰用品有限公司</a></div>
</div>
<div class="AnLiPic">
<div><a href="" target="_blank"><img src="ProImage/00000365_s.jpg" alt="網盈網路網站建設經典案例--中國企業建站平台" width="146" height="91" border="0" /></a></div>
<div class="AnLiText"><a href="" target="_blank" title="中國企業建站平台">中國企業建站平台</a></div>
</div>
<div class="AnLiPic">
<div><a href="/" target="_blank"><img src="ProImage/00000364_s.jpg" alt="網盈網路網站建設經典案例--長沙新畫佳光電子有限公司" width="146" height="91" border="0" /></a></div>
<div class="AnLiText"><a href="/" target="_blank" title="長沙新畫佳光電子有限公司">長沙新畫佳光電子有限公司</a></div>
</div>
<div class="AnLiPic">
<div><a href="/" target="_blank"><img src="ProImage/00000363_s.jpg" alt="網盈網路網站建設經典案例--長沙佳程工礦實業有限公司" width="146" height="91" border="0" /></a></div>
<div class="AnLiText"><a href="/" target="_blank" title="長沙佳程工礦實業有限公司">長沙佳程工礦實業有限公司</a></div>
</div>
<div class="AnLiPic">
<div><a href="http://www.haihuigm.cn" target="_blank"><img src="ProImage/00000362_s.jpg" alt="網盈網路網站建設經典案例--湖南海匯工貿有限責任公司" width="146" height="91" border="0" /></a></div>
<div class="AnLiText"><a href="http://www.haihuigm.cn" target="_blank" title="湖南海匯工貿有限責任公司">湖南海匯工貿有限責任公司</a></div>
</div>
<div class="AnLiPic">
<div><a href="http://www.hnyzgg.com.cn/" target="_blank"><img src="ProImage/00000361_s.jpg" alt="網盈網路網站建設經典案例--長沙藝展廣告有限公司" width="146" height="91" border="0" /></a></div>
<div class="AnLiText"><a href="http://www.hnyzgg.com.cn/" target="_blank" title="長沙藝展廣告有限公司">長沙藝展廣告有限公司</a></div>
</div>
</div> |
好了下面我們來看看css是怎麼定義的吧.
| 代碼如下 |
複製代碼 |
#firstContent1{
margin:0px 2px 2px;
height:249px!important;
height:248px;
background:#F2F2F2;
} #AnLiLeft{
width:520px;
height:100%;
}
.AnLiPic{
margin:10px 0px 0px 15px;
border:1px solid #ccc;
float:left;
} |
就這麼簡單的其它的我就不說了,只申明一下本站原創文章轉載請註明: www.111cn.net/cssdiv/css.html
