ホームページ > 記事 > ウェブフロントエンド > マージンとオーバーフロー属性を使用して div 間隔を実装する方法_エクスペリエンス交換
マージンとオーバーフロー属性を使用して div 間隔を実装する方法_エクスペリエンス交換
- PHP中文网オリジナル
- 2016-05-16 12:06:362082ブラウズ
マージンとオーバーフロー属性を使用して div spacing_experience 交換を実現する方法
通常、上の図を作成するときは、4 つの p を与えます。さらに、中間の間隔を実現するために、さまざまな css 属性が使用されます。しかし、私たちがもっと期待しているのは、html タグをマークする必要がなく、css を通じて直接実現できることです。xiaozhi さんが今日のフォーラムで非常に良いソリューションを提案しました。 overflow:hidden 属性を使用します。おそらく多くの人がこの方法をすでに使用していると思いますが、私はこれを使用したことがなく、新鮮に感じます。ふふ。実は理由は非常に単純で、li の margin-right プロパティと margin-bottom プロパティを通常どおりに設定しているため、結果は当然予想よりも右と下に表示されます。このとき、親を介して width/ を設定しています。 ul. 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>上記は、マージン属性とオーバーフロー属性を使用して div spacing_experience 交換コンテンツを実現する方法です。その他の関連コンテンツ php 中国語 web サイト (www.php.cn) をフォローしてください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。