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

站长资源 2024/12/24 佚名

2 0 1

兴国资源网 Design By www.nnzcdc.com

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

解决方法请看图：

<!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>                      <h1>巧用overflow:hidden解决中间间隔问题</h1>                              <ul>                     <li>                                                      <h2>Title</h2>                             <p>Content</p>                                              </li>                     <li>                                                      <h2>Title</h2>                             <p>Content</p>                                              </li>                     <li>                                                      <h2>Title</h2>                             <p>Content</p>                                              </li>                     <li>                                                      <h2>Title</h2>                             <p>Content</p>                                              </li>                 </ul>                       </body> </html>

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

margin,overflow,实现div间距

兴国资源网 Design By www.nnzcdc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

兴国资源网 Design By www.nnzcdc.com

评论“用margin和overflow属性实现div间距的方法”

暂无评论...

www.nnzcdc.com 兴国资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年12月24日

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

用css alpha 滤镜实现input file 样式美化代码

用iframe margin实现调用其他网页的某一区域的方法

评论“用margin和overflow属性实现div间距的方法”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接

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

用css alpha 滤镜 实现input file 样式美化代码

用iframe margin实现调用其他网页的某一区域的方法

评论“用margin和overflow属性实现div间距的方法”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接

用css alpha 滤镜实现input file 样式美化代码