多个div在同一行以相同间隔分布:


这样的布局效果使用非常的频繁，也就是让多个div在一行分布，并且div于div之间的间隙是一样的，多用在对于产品的展示之用，下面就介绍一下如何实现此中布局，代码实例如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<title>div均匀分布代码实例</title>

<style type="text/css">

*{

  margin:0px;

  padding:0px;

}

#box{

  width:430px;

  height:200px;

  background-color:red;

  overflow:hidden;

  margin:100px;

}

#box ul{

  width:440px;

}

#box ul li{

  width:100px;

  height:100px;

  background-color:green;

  float:left;

  margin-right:10px;

  list-style:none;

}

</style>

</head>

<body>

<div id="box">

  <ul>

    <li><a href="http://www.100sucai.com/web/wangyezhizuo/fanhuidingbu/" title="返回顶部">返回顶部</a></li>

  <li><a href="http://www.100sucai.com/web/wangyezhizuo/tucengdaima/" title="图层代码">图层代码</a></li>

  <li><a href="http://www.100sucai.com/web/wangyezhizuo/gundongdaima/" title="滚动代码">滚动代码</a></li>

  <li><a href="http://www.100sucai.com/web/jquerytexiao/huandengpian/" title="幻灯片">幻灯片</a></li>

  </ul>

</div>

</body>

</html>

　　

以上代码实现了我们的要求，li元素能够均匀的分布在div中，并且中间的间隔是相同的。
原理非常的简单，就是让li左浮动，然后设置margin-right属性值，也就是li元素之间的间隔，并且div元素具有overflow:hidden属性，这样超出margin-right部分恰好被隐藏，这样就实现了右端没有空白的效果。

div均匀分布代码实例的更多相关文章

  1. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  2. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  3. (转)combogrid的代码实例

    EasyUI中combogrid的代码实例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  4. 【转】div居中代码 DIV水平居中显示CSS代码

    原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...

  5. html利用锚点实现定位代码实例

    本章节介绍介绍一下如何利用锚点实现定位,使用锚点实现定位是html固有的功能,当然比较简单,也实现了基本的功能,但是功能相对简单一些,如果想要实现平滑的定位可以参阅jquery实现的点击页面动画方式平 ...

  6. !!!css如何让img图片居中？css的display属性实现图片居中（代码实例）

    在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...

  7. EasyUI中combobox的使用方法和一个代码实例

    一.easyUI中select下拉框动态添加option选项 问题:想在combobox的下拉项里动态添加一些内容,但是添加不成功.因为jquery easyui的下拉列表combobox是用DIV模 ...

  8. ajax实现的点击数目加1代码实例

    ajax实现的点击数目加1代码实例:在点击按钮实现数字增加效果代码实例一章节中,介绍如何点击按钮实现数字加1的效果,但是好像并没有什么实际用处,下面就分享一段相对完整的能够在实际应用中派上用场的代码, ...

  9. MATLAB的PLOT函数线型设置及横坐标为字符串的代码实例

    2.横坐标为字符串的代码实例 cell={‘PLS’,’SVM’,’RF’,’NNET’,’NB’,’PLR’,’C5.0′,’PDA’,’KNN’,’GLM’,’BCT’};%分类方法yData=[ ...

随机推荐

  1. 64位Windows7升级IE11后无法启动的解决办法

    1.控制面板\网络和 Internet\Internet选项 2.在高级选项卡的“安全”组配置

  2. php如何判断当前的操作系统是linux还是windows

    php_uname()这个函数的意义在于返回当前PHP所运行的系统的信息,下面对这个函数详细说明一下: /** * 功能:返回当前PHP所运行的系统的信息 * @param string $mode ...

  3. Template_17_metaprogram

    1,模板实例化机制是一种基本的递归语言机制,可以用于在编译期执行复杂计算.2,枚举值和静态常量在原来的C++编译器中,在类声明的内部,枚举值是声明"真常值"(常量表达式)的唯一方法 ...

  4. 【转】理解依赖注入（IOC）和学习Unity

    IOC:英文全称:Inversion of Control,中文名称:控制反转,它还有个名字叫依赖注入(Dependency Injection).作用:将各层的对象以松耦合的方式组织在一起,解耦,各 ...

  5. MATLAB light material lighting

    clf;[X,Y,Z]=sphere(40);colormap(jet)subplot(1,2,1),surf(X,Y,Z),axis off square,shading interplight(' ...

  6. keditor_php图片上传

    <script type="text/javascript" src="/statics/js/kindeditor/kindeditor-min.js" ...

  7. composer安装yii2或者laravel报错

    大概的信息就是提示让登陆github,然后就报错了 Could not fetch https://api.github.com/authorizations, enter your GitHub c ...

  8. fis3简单教程

    #进入工作目录初始化fis3目录(此步非必须,如果当前目录已有fis-conf.js文件,可以不用初始化)fis3 init#部署(<path>为部署目录,如果想部署到当前output目录 ...

  9. 第27章 项目8：使用XML-RPC进行文件共享

    1.问题 创建一个简单的P2P文件共享程序. P2P文件共享程序是在不同计算机上的程序交换文件.P2P交互内,任何节点(peer)都可以是链接到其他节点.在这样一个由节点组成的虚拟网络中,是没有中央节 ...

  10. 开源免费的C/C++网络库(c/c++ sockets library)

    (1)ACE 庞大.复杂,适合大型项目.开源.免费,不依赖第三方库,支持跨平台. http://www.cs.wustl.edu/~schmidt/ACE.html (2)Asio Asio基于Boo ...