歡迎來到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.133025.buzz/template/m779.shtml

德甲最新射手榜 辽宁十一选五走势图彩经网 广西21选5走势图 河南快三投注网站 七个数学家禁止入赌场 体彩大乐透玩法说明 云南快乐10分开奖结果一定牛 贵州快三今日34期开奖结果 福利彩票的腾讯三分彩 七乐彩专家预测总汇 股票融资如何操作,切记不要满仓买入 外汇配资 河北十一选五跨度表 泳坛夺金怎么玩 天津快乐十分中奖技巧有谁知道的呀 有啥股票分析软件 江苏十一选五任五遗漏