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

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

CSS样式表: css列表前的小方块; 解决div被flash挡住的设置方法; input file 不能更改value值的解决办法; 图片垂直居中之姊妹 DIV垂直居中; div的dispaly:inline样式和span的区别; CSS控制图片大小-适应宽度; CSS 浮动清理，不使用 clear:both标签; css设置字间距; CSS 美化段落文本之首字下沉; 浅谈html中id和name的区别实例代码; CSS布局中可以用javascript判断浏览器版本; div css nowrap无换行; css 不换行自动换行强制换行的实现方法; css ol有序列表; div层跨越iframe帧显示在上面的解决方法附代码; css创意ul+li实现的细线表格实现代码; css层固定位置练习; 提高CSS网页渲染效率的11点注意事项; css expression 隔行换色; 不错的整理的24则css技巧

No. « ‹ 47 48 49 50 › »

技术文章搜索

关键字

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

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

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