マージンとオーバーフロー属性を使用して div 間隔を実装する方法_エクスペリエンス交換-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

マージンとオーバーフロー属性を使用して div 間隔を実装する方法_エクスペリエンス交換

PHP中文网

May 16, 2016 pm 12:06 PM

マージンとオーバーフロー属性を使用して div spacing_experience 交換を実現する方法

マージンとオーバーフロー属性を使用して div 間隔を実装する方法_エクスペリエンス交換

通常、上の図を作成するときは、4 つの p を与えます。さらに、中間の間隔を実現するために、さまざまな css 属性が使用されます。しかし、私たちがもっと期待しているのは、html タグをマークする必要がなく、css を通じて直接実現できることです。xiaozhi さんが今日のフォーラムで非常に良いソリューションを提案しました。 overflow:hidden 属性を使用します。おそらく多くの人がこの方法をすでに使用していると思いますが、私はこれを使用したことがなく、新鮮に感じます。ふふ。実は理由は非常に単純で、li の margin-right プロパティと margin-bottom プロパティを通常どおりに設定しているため、結果は当然予想よりも右と下に表示されます。このとき、親を介して width/ を設定しています。 ul. height 属性の値を指定し、overflow:hidden で余分な部分を非表示にします。良い方法ですね、笑！

解決策については画像をご覧ください:
マージンとオーバーフロー属性を使用して 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"> 
    <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 id="巧用overflow-hidden解决中间间隔问题">巧用overflow:hidden解决中间间隔问题</h1> 
            <div> 

                <ul> 
                    <li> 
                        <div> 
                            <h2 id="Title">Title</h2> 
                            <p>Content</p> 
                        </div> 
                    </li> 
                    <li> 

                        <div> 
                            <h2 id="Title">Title</h2> 
                            <p>Content</p> 
                        </div> 
                    </li> 
                    <li> 
                        <div> 
                            <h2 id="Title">Title</h2> 

                            <p>Content</p> 
                        </div> 
                    </li> 
                    <li> 
                        <div> 
                            <h2 id="Title">Title</h2> 
                            <p>Content</p> 

                        </div> 
                    </li> 
                </ul> 
            </div> 
        </div> 
</body> 
</html>

上記は、マージン属性とオーバーフロー属性を使用して div spacing_experience 交換コンテンツを実現する方法です。その他の関連コンテンツ php 中国語 web サイト (www.php.cn) をフォローしてください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。