歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!

靠左靠右布局與只靠左布局DIV CSS實例模塊

在實際css布局中常常會遇到,圖標式超鏈接布局,以下為大家介紹一個使用float實現的圖標布局。

采用css float布局效果截圖
采用css float布局效果截圖

本模塊使用float浮動實現div css布局。通過兩種方法實現同種布局效果,第一種靠左float:leftfloat:right靠右實現布局,第二種使用兩個float:left靠左實現。間距使用padding實現與div間距效果。

一、案例關鍵代碼   -   TOP

1、CSS代碼

  1. .boxs{ margin:0 auto; height:70px; width:550px; background:#4089B2;
     padding-top:32px; overflow:hidden} 
  2. .box-left{ float:left; width:250px; text-align:right} 
  3. .box-right{ float:right; width:250px; text-align:left} 
  4.  
  5. .boxs2{ margin:0 auto; height:70px; width:550px; background:#4089B2; padding-top:32px} 
  6. .box-left2{ float:left; width:154px; padding-left:96px} 
  7. .box-right2{ float:left; width:154px; padding-left:50px} 

2、HTML代碼

  1. <p>使用靠左float:left 靠右float:right實現布局:</p> 
  2. <div class="boxs"> 
  3. <div class="box-left"><a href="#"><img src="images/ad1.gif" /></a></div> 
  4. <div class="box-right"><a href="#"><img src="images/ad2.gif" /></a></div> 
  5. </div> 
  6. <p>使用靠左float:left和padding實現布局:</p> 
  7. <div class="boxs2"> 
  8. <div class="box-left2"><a href="#"><img src="images/ad1.gif" /></a></div> 
  9. <div class="box-right2"><a href="#"><img src="images/ad2.gif" /></a></div> 
  10. </div> 

3、效果截圖

float實現圖標左右布局
float實現圖標左右布局

二、案例在線瀏覽與下載   -   TOP

1、css實例在線演示

查看案例

2、css div案例打包下載

div+css實例采用div css布局,通過兩種方法實現其布局效果,大家可以學會利用float實現并列左右布局效果。

如需轉載,請注明文章出處和來源網址:http://www.hjkjtws.com.cn/template/m779.shtml

时时彩内部管理计划群 网赚日赚100元平台 幸运十一选五开奖走势 体彩新疆11选5开奖结果 九五至尊棋牌游戏 体彩p3试机号 3d开奖号是多少 福建11选5助手 换股 精准六肖期期无错 永利棋牌官方版下载 辽宁快乐十二一定牛 江苏七位数走势图新浪 韩国快乐8开奖数据 30选5开奖结果 中国体育彩票大乐透玩法 福建31选7最新开奖结果今天