用margin和overflow屬性實現div間距的方法_經驗交流
- PHP中文网原創
- 2016-05-16 12:06:362113瀏覽
用margin和overflow屬性實現div間距的方法_經驗交流
通常我們在製作上圖的時候，會分別給四個p加上不同的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">
<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>
<h1>巧用overflow:hidden解决中间间隔问题</h1>
<div>
<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>以上就是用margin和overflow屬性實現div間距的方法_經驗交流的內容，更多相關內容請關注php中文網（www.php.cn）！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn