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

ttx9n · 发表于 2007-12-4 18:20:39

通常我们在制作上图的时候，会分别给四个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需刷新才能执行]

z80vh · 发表于 2022-12-28 21:35:16

天天源码社区www.tiantianym.com

白狐软件 · 发表于 2023-6-13 18:21:23

儿童服务绯闻绯闻绯闻

i3x3r3 · 发表于 2023-9-1 19:41:38

撒房产税陈飞飞

gc4hg · 发表于 2023-9-19 02:50:30

啪啪啪生怕PSP怕

q42obh · 发表于 2023-10-24 04:20:50

哦哦哦ijhhsdj

u6h2m4 · 发表于 2024-2-18 15:17:43

额头额定法国队是范德萨

6q8s6p21 · 发表于 2024-3-7 00:21:30

了乐趣了去了去了去了去了

qwe520 · 发表于 2024-3-15 04:32:34

2222222222222222

plvo189 · 发表于 2024-3-15 07:10:00

逛逛看看瞧瞧

账号		自动登录	找回密码
密码			立即注册

[CSS/HTML] 用margin和overflow属性实现div间距的方法

相关帖子