欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > DIV+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.divcss5.com/template/m779.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2015-07-16 22:49 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。