多个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. ubuntu tty 永久修改中文环境为英文

    以下代码只针对当前用户tty1有效, 对我来说足够了 vim ~/.bashrc 加入如下代码 if [ "$(tty)" = "/dev/tty1" ]; t ...

  2. Android 图片开发内幕系列第一篇

    前言:本来我是做电视应用的,但是因为公司要出手机,人员紧张,所以就抽调我去支援一下,谁叫俺是雷锋呢!我做的一个功能就是处理手机中的应用ICON,处理无非就是美化一下,重新与底板进行合成和裁剪,用到了很 ...

  3. 20141211—C#面向对象，封装

    封装 一个private 的变量.在变量名上右键-重构-封装字段 小建议:在创建封装字段的时候,在名字前加 “_”用以区分. 封装时,下划线会自动去除 点击确定后: 应用: 赋值的时候走 set 取值 ...

  4. python基础:三层循环

    三层循环基本演示: break_flag = False #标记1 break_flag2 = False #标记2 break_flag3 = False #标记3 while not break_ ...

  5. 《asp.net mvc实战》笔记

    对于大部分复杂的项目来说,可能不会在Models文件夹中放置你的模型.一般来说,最好的方法是将你的领域模型放在独立的项目中.这样其他应用程序可以在使用该项目而不必依赖于你的MVC应用程序.我们建议你只 ...

  6. 4月12日学习笔记——jQuery事件

    下面是在 jQuery 中最常使用的 bind()方法举例:$("#testDiv4").bind("click", showMsg); 我们为 id 是 te ...

  7. Linux C 程序 信号及信号的处理(19)

    信号及信号的处理 1.Linux信号的介绍  信号是一种软件中断.Linux系统中根据POSIX标准扩展的信号机制.  1.信号来源      1.硬件方式           1.当用户按下某个键, ...

  8. Hbase 0.95.2介绍及下载地址

    HBase是一个分布式的.面向列的开源数据库,该技术来源于Google论文“Bigtable:一个结构化数据的分布式存储系统”.就像Bigtable利用了Google文件系统(File System) ...

  9. php更新修改excel中的内容例子

    代码如下 复制代码 //模板存放目录$dir = $DOCUMENT_ROOT.'/backoffice/admin/oemcheck/';  $templateName = '1.xlsx';$ou ...

  10. Oracle内存管理理论篇二

    目标 了解oracle内存管理方式 掌握ASMM管理方式 掌握AMM管理方式 监控内存使用 学习一个知识点时,最好先了解其历史.ORACLE近期的版本都对内存管理做了简化,从9i通过PGA_AGGRE ...