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

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

CSS样式表: CSS实例教程:永远在网页底部的网页布局; 优秀的网页评论表单的设计方法; CSS编写经验谈:常用的10个CSS类名; CSS:网页表单实现鼠标悬停交互效果; CSS代码中注释的3种方法; CSS教程：网页头部css代码优化实例; 网页制作基础：声明文档类型描述（DTD）; 如何解决IE7和IE8的兼容性问题; CSS网页布局网页制作技巧总结; CSS网页设计：IE8和IE7共存; CSS2打印属性让打印HTML文档不出问题; 使用CSS3新技术完美实现圆角效果; jQuery插件实现css3效果; CSS教程：margin属性定义边外补白; CSS教程：padding属性定义边内补白; CSS教程：学习border-width属性; CSS教程：学习border-color属性; CSS教程：学习border-style属性; CSS教程：学习border属性; 网页排版经常用到的5个CSS基础

No. « ‹ 59 60 61 62 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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间距的方法