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

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

CSS样式表: CSS+DIV 拼图(26个英文字母); css 模拟表格斜线; hr 样式实现1px直线; css 画的百度LOGO; css 文字上右下环绕广告的写法; CSS 实现未知内容高度的垂直水平居中(改良版); input 按钮显示差异的解决方法; css 限定GridView宽度并加上滚动条; ie6 position-fixed效果; css 书写技巧 CSS 技巧教程; IE和FireFox JavaScript的函数名的作用域的异同; 纯CSS 级联菜单实现代码; CSS 清除网页浮动经验; id与class的使用原则网页制作经验; CSS expression判断表达式设置input样式; 应用IE6所不支持的CSS的type选择器; CSS 网页内容换行控制; DIV+CSS 网页布局心得; CSS 教程之内容设置的一些语法; 用div和ul标签画表格进行布局兼容火狐、ie6、ie7、Opera等浏览器

No. « ‹ 18 19 20 21 › »

技术文章搜索

关键字

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

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

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