用margin和overflow属性实现div间距的方法- CSS样式表

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 用margin和overflow属性实现div间距的方法

CSS样式表: 分页显示之超级提速版; 兼容多浏览器实现半透明(Opera ie firefox); 解析IE, FireFox, Opera 浏览器支持Alpha透明的方法; utf8和unicode编码究竟是什么关系？有何区别?; XHTML下css+div布局总结超强推荐; 在IE下拖动滚动条时border消失的解决方法; CSS中常用的单位; 有关表格边框的css语法整理(1); 中文排版CSS心得; 一个针对IE7的CSS Hack; css也疯狂! 用background 插入flash播放器; 如何解决下拉菜单被flash覆盖的问题; 网页中关闭IE的图像工具栏和XP主题; 解决IE升级后Flash线框问题; em px的关系; 在iframe中隐藏横向滚动条的方法大全; Iframe自适应其加载的内容高度; 固定右栏宽度, 左栏内容先出现同时自适应宽度的布局; IE Bug--浮动对象外补丁的双倍距离的解决方法; 解决IE7以下版本不支持无A状态伪类的几种方法

No. « ‹ 33 34 35 36 › »

技术文章搜索

关键字

CSS样式表中的用margin和overflow属性实现div间距的方法

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 462 ::

收藏到网摘: n/a

h1标签的使用技巧非常漂亮的css星级效果总结

通常我们在制作上图的时候，会分别给四个div加上不同的css属性，来实现中间间隔。但我们更希望的是不需要对html标签做标识，直接能通过css实现，今天在论坛上小志提出了一个很不错的解决方案。使用overflow:hidden属性。或许很多人已经是这样用了，我没用过，觉得耳目一新。呵呵。其实道理很简单，我们按照正常的设置li的margin-right、margin-bottom属性，这样的结果自然会比我们期望的要多出来右边和下方的，这个时候我们通过ul的父级来设置width/height属性，然后overflow:hidden把多余的隐藏掉。好方法，呵呵！
解决方法请看图：
overflow实现div间距

点击运行可以看到效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-CN" /> <meta name="robots" content="all" /> <meta name="author" content="" /> <meta name="Copyright" content="CopyRight 2007" /> <meta name="keywords" content="CSS,overflow属性" /> <meta name="description" content="巧用overflow:hidden解决中间间隔问题" /> <title>巧用overflow:hidden解决中间间隔问题</title> <style type="text/css"> *{margin:0;padding:0;} body{text-align:center;background:#CCC;} ul{list-style:none;} .main {background:white;height:800px;width:597px;margin:0 auto;} .box {width:595px;height:205px;margin:20px auto;overflow:hidden;background:white;} .box ul {width:600px;height:210px;} .box li {float:left;margin-right:5px;margin-bottom:5px;} .box div {background:white;background:#f7f7f7;width:293px;height:98px;border:1px solid #CCC} .box h2 {background:#9CC;text-align:left;text-indent:10px;font-size:12px;height:24px;line-height:24px;} </style> </head> <body> <div class="main"> <h1>巧用overflow:hidden解决中间间隔问题</h1> <div class="box"> <ul> <li> <div> <h2>Title</h2> Content </div> </li> <li> <div> <h2>Title</h2> Content </div> </li> <li> <div> <h2>Title</h2> Content </div> </li> <li> <div> <h2>Title</h2> Content </div> </li> </ul> </div> </div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

h1标签的使用技巧非常漂亮的css星级效果总结

CSS样式表 中的 用margin和overflow属性实现div间距的方法

评论 (0) All

CSS样式表中的用margin和overflow属性实现div间距的方法