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

巧用overflow:hidden解决中间间隔问题

Title

ホームページ

ウェブフロントエンド

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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7651

CakePHP チュートリアル

1392

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTミニクロスワードの回答

110

Related knowledge

H5ページの生産はフロントエンド開発ですか？ Apr 05, 2025 pm 11:42 PM

はい、H5ページの生産は、HTML、CSS、JavaScriptなどのコアテクノロジーを含むフロントエンド開発のための重要な実装方法です。開発者は、＆lt; canvas＆gt;の使用など、これらのテクノロジーを巧みに組み合わせることにより、動的で強力なH5ページを構築します。グラフィックを描画するタグまたはJavaScriptを使用して相互作用の動作を制御します。