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

江西多乐彩走势图今天 足球明星游戏可以赚钱 彩金捕鱼转微信红包 个人做跨境电商赚钱么 辐射4卖东西怎么赚钱 有企业资源做什么赚钱 免费聊天赚钱的app 亿赢彩票安卓 蛋糕物语快速赚钱攻略 有什么好玩又可以赚钱的游戏 彩票909群 可口可乐经销商赚钱吗 女生做保健按摩赚钱吗 微信捕鱼达人玩法与技巧 十二生肖押宝赚钱吗 为什么大部分微商现在不赚钱 ag捕鱼王2app下载最新版