用margin和overflow属性实现div间距的方法

更新时间：2007年12月04日 18:20:39 作者：

通常我们在制作上图的时候，会分别给四个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>                             <p>Content</p>                         </div>                     </li>                     <li>                         <div>                             <h2>Title</h2>                             <p>Content</p>                         </div>                     </li>                     <li>                         <div>                             <h2>Title</h2>                             <p>Content</p>                         </div>                     </li>                     <li>                         <div>                             <h2>Title</h2>                             <p>Content</p>                         </div>                     </li>                 </ul>             </div>         </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

谈谈网页设计中的字体应用Font Set
最近有不少人都提及了网页上该如何选择字体的问题。问题虽然小，但是却是前端开发中的基本，因为目前的网页，还是以文字信息为主，而字体，作为文字表现形式的最重要参数之一，自然有着相当重要的地位。
2008-09-09
web标准常见问题集合5
web标准常见问题集合5...
2006-12-12
CSS3的核心特性和应用场景
CSS3是现代Web开发中不可缺少的技术,提供丰富视觉效果和布局能力,CSS3引入新选择器、媒体查询、渐变、阴影、过渡和动画等特性,支持响应式设计和用户体验优化,兼容性和性能仍是挑战,未来将结合JavaScript实现更互动的效果
2024-11-11
用CSS让表格返转的代码 IE only
用CSS让表格返转的代码 IE only...
2007-03-03
HTML5的核心特性和应用场景
HTML5是Web开发的重要标准,引入新语义元素、API、多媒体支持等,提升网页功能性和用户体验,其特性包括语义元素、多媒体支持、Canvas、SVG和本地存储,应用场景涵盖响应式设计、移动开发和单页面应用
2024-11-11
解决IE5/IE5.5/IE6/FF的兼容性问题——CSS
解决IE5/IE5.5/IE6/FF的兼容性问题——CSS...
2007-05-05
html中的form不提交（排除）某些input
在Html的form点击提交时，form内所有Input filed的内容，只要是有name属性的，并且没有disabled属性的，都会被提交，即通过网络发送到指定的URL。这是正常情况，如果有不想提交的input属性呢？
2022-12-12
CSS中Float（浮动）相关技巧文章
CSS中Float（浮动）相关技巧文章...
2007-09-09
IE hack条件写法
非常不错的对于ie hack的一些写法讲解
2008-11-11
css import与link的区别
看到淘宝网页中这样写使用的是import,而很多网站都是使用link，当然还有一些页面比较简单，流量很大的网站，是直接将CSS写在html代码中的？他们有什么区别？css用import还是link好?从经典论坛和另外一个网站大概了解了一下
2008-09-09

用margin和overflow属性实现div间距的方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具