CSS レイアウトやその他の実装における負のマージンの魔法のような使い方

プロジェクトの開発中に、X (X>1) 個のブロックを 1 行に配置し、隣接するブロック間の間隔を同じにする必要があるというニーズに誰もが遭遇したことがあると思います。

おそらく上記のようになります。実装する方法はいくつかあります。

1. 負のマージン方法

要素の幅とマージンを親の幅を満たすように設定し、親のマージン左を負のマージンの幅に設定します

CSS コードコンテンツをクリップボードにコピーします

<style type="text/css">    
*{   
 margin: 0;   
 padding: 0;   
}   
img{   
 vertical-align: middle;   
}   
  
ul>li{   
 float: left;   
}   
  
ul>li>img{   
 width: 100%;   
}   
    
.test1{   
padding: 0 2%;   
margin-left: -3.3%;   
}   
    
.test1>li{   
width: 30%;   
margin-left: 3.3%;   
}   
  
</style>   
 <p>1.关于负margin的实现，由于margin是基于父级计算的，会有一定的偏差，但是用于移动端上，误差可以忽略不计</p>   
        <ul class="test1 clearfix">   
            <li><img  src="/static/imghw/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="CSS レイアウトやその他の実装における負のマージンの魔法のような使い方" ></li>   
            <li><img  src="/static/imghw/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="CSS レイアウトやその他の実装における負のマージンの魔法のような使い方" ></li>   
            <li><img  src="/static/imghw/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="CSS レイアウトやその他の実装における負のマージンの魔法のような使い方" ></li>   
        </ul>

上記のエラーは、異なる要素に基づいて ul のマージン パーセンテージと li のマージン パーセンテージを計算することによって発生します。ただし、その範囲が限られているためです。モバイル端末のウィンドウでは、この差は非常にわずかであり、PC では一般的に px が使用されるため、無視しても問題ありません。 (以下にその他の方法があります)

2. ボックス サイズを使用して要素内を埋める主要な Web サイトの実装には、

CSS コード コンテンツをクリップボードにコピーすることが必要です。

<style type="text/css">   
*{   
    margin: 0;   
    padding: 0;   
}   
img{   
    vertical-align: middle;   
}   
.test1{   
    padding: 0 2%;   
    margin-left: -3.3%;   
}   
ul>li{   
    float: left;   
}   
.test1>li{   
    width: 30%;   
    margin-left: 3.3%;   
}   
ul>li>img{   
    width: 100%;   
}   
.test2>li{   
    width: 33.3%;   
    padding: 0 2%;   
    box-sizing: border-box;   
}   
.test3{   
    display: flex;   
    justify-content: space-between;   
       
}   
.test3>li{   
    width: 31.3%;   
    padding: 0 2%;   
    float: none;   
}   
.test4{   
    width: 1200px;   
    border: 1px solid red;   
    margin-left: -3.33%;   
}   
.test4>li{   
    width: 30%;   
    margin-left: 3.33%;   
}   
</style>   
<p>2.各大网站的实现，在元素内部进行填充,使用box-sizing，需要ie8及以上才支持</p>   
        <ul class="test2 clearfix">   
            <li><img  src="/static/imghw/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="CSS レイアウトやその他の実装における負のマージンの魔法のような使い方" ></li>   
            <li><img  src="/static/imghw/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="CSS レイアウトやその他の実装における負のマージンの魔法のような使い方" ></li>   
            <li><img  src="/static/imghw/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="CSS レイアウトやその他の実装における負のマージンの魔法のような使い方" ></li>   
        </ul>

この実装にはまだ欠点は見つかっておらず、コードはシンプルで理解しやすいです(推奨)

3. フレキシブルボックスモデルフレックスの実装には互換性処理が必要です(古いボックス+新しいボックス) box)

CSS コードコンテンツをクリップボードにコピーします

<style type="text/css">   
*{   
    margin: 0;   
    padding: 0;   
}   
img{   
    vertical-align: middle;   
}   
.test1{   
    padding: 0 2%;   
    margin-left: -3.3%;   
}   
ul>li{   
    float: left;   
}   
.test1>li{   
    width: 30%;   
    margin-left: 3.3%;   
}   
ul>li>img{   
    width: 100%;   
}   
.test2>li{   
    width: 33.3%;   
    padding: 0 2%;   
    box-sizing: border-box;   
}   
.test3{   
    display: flex;   
    justify-content: space-between;   
       
}   
.test3>li{   
    width: 31.3%;   
    padding: 0 2%;   
    float: none;   
}   
.test4{   
    width: 1200px;   
    border: 1px solid red;   
    margin-left: -3.33%;   
}   
.test4>li{   
    width: 30%;   
    margin-left: 3.33%;   
}   
</style>   
<p>3.弹性盒模型flex的实现，需要做兼容处理（旧盒子+新盒子），仅为演示，没做兼容处理</p>   
        <ul class="test3">   
            <li><img  src="/static/imghw/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="CSS レイアウトやその他の実装における負のマージンの魔法のような使い方" ></li>   
            <li><img  src="/static/imghw/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="CSS レイアウトやその他の実装における負のマージンの魔法のような使い方" ></li>   
            <li><img  src="/static/imghw/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="CSS レイアウトやその他の実装における負のマージンの魔法のような使い方" ></li>   
        </ul>

この状況でフレックスを使用せずにどうすればよいでしょうか? フレックス ボックス モデルは、この状況を処理できるように特別に設計されている必要がありますが、各ブラウザは、新しいボックス モデルと古いボックス モデルを異なる方法で実装します。したがって、一般に、ボックス モデルの両方のセットの属性を追加する必要があります。 (投げたい人はやるだけで効果は絶大です)

4.classnameの実装

特別な処理が必要な要素には別のクラスを追加し、それに応じて処理します。バックエンドまたはフロントエンドで処理できます (バックエンド処理が推奨されます)

CSS コードコンテンツをクリップボードにコピーします

<style type="text/css">   
*{   
    margin: 0;   
    padding: 0;   
}   
img{   
    vertical-align: middle;   
}   
.test1{   
    padding: 0 2%;   
    margin-left: -3.3%;   
}   
ul>li{   
    float: left;   
}   
.test1>li{   
    width: 30%;   
    margin-left: 3.3%;   
}   
ul>li>img{   
    width: 100%;   
}   
.test2>li{   
    width: 33.3%;   
    padding: 0 2%;   
    box-sizing: border-box;   
}   
.test3{   
    display: flex;   
    justify-content: space-between;   
       
}   
.test3>li{   
    width: 31.3%;   
    padding: 0 2%;   
    float: none;   
}   
.test4{   
    padding: 0 2%;   
}   
.test4>li{   
    width: 30%;   
    margin-left: 5%;   
}   
.test4>li.first{   
    margin: 0;   
}   
.test5{   
    padding: 0 2%;   
}   
.test5>li{   
    width: 30%;   
    margin-left: 5%;   
}   
.test5>li:first-child{   
    margin: 0;   
}   
</style>   
<p>4.classname实现</p>   
        <ul class="test4 clearfix">   
            <li class="first"><img  src="/static/imghw/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="CSS レイアウトやその他の実装における負のマージンの魔法のような使い方" ></li>   
            <li><img  src="/static/imghw/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="CSS レイアウトやその他の実装における負のマージンの魔法のような使い方" ></li>   
            <li><img  src="/static/imghw/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="CSS レイアウトやその他の実装における負のマージンの魔法のような使い方" ></li>   
        </ul>

5.css セレクターの実装

:first- child :first -type-of :nth-child() これらの実装には技術的な問題はありません。CSS ドキュメントを確認して、CSS コードをクリップボードにコピーしてください

<style type="text/css">   
*{   
    margin: 0;   
    padding: 0;   
}   
img{   
    vertical-align: middle;   
}   
.test1{   
    padding: 0 2%;   
    margin-left: -3.3%;   
}   
ul>li{   
    float: left;   
}   
.test1>li{   
    width: 30%;   
    margin-left: 3.3%;   
}   
ul>li>img{   
    width: 100%;   
}   
.test2>li{   
    width: 33.3%;   
    padding: 0 2%;   
    box-sizing: border-box;   
}   
.test3{   
    display: flex;   
    justify-content: space-between;   
       
}   
.test3>li{   
    width: 31.3%;   
    padding: 0 2%;   
    float: none;   
}   
.test4{   
    padding: 0 2%;   
}   
.test4>li{   
    width: 30%;   
    margin-left: 5%;   
}   
.test4>li.first{   
    margin: 0;   
}   
.test5{   
    padding: 0 2%;   
}   
.test5>li{   
    width: 30%;   
    margin-left: 5%;   
}   
.test5>li:first-child{   
    margin: 0;   
}   
</style>   
<p>5.css选择器实现(注意ie兼容性)</p>   
        <ul class="test5 clearfix">   
            <li><img  src="/static/imghw/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="CSS レイアウトやその他の実装における負のマージンの魔法のような使い方" ></li>   
            <li><img  src="/static/imghw/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="CSS レイアウトやその他の実装における負のマージンの魔法のような使い方" ></li>   
            <li><img  src="/static/imghw/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="CSS レイアウトやその他の実装における負のマージンの魔法のような使い方" ></li>   
        </ul>

。

すべてのデモを投稿しました X=2、幅を設定、左側で左フロート、右側で右フロートの場合に別の状況があることをほとんど忘れていました。 実際、X=3 の場合、これに対処する別の方法があります。左要素と右要素はそれぞれ左と右にフロートし、中央の要素は親を基準にして絶対位置および中央に設定されます。

不可分であるため、ボックスサイジングのように完全に計算することはできませんが、プロジェクトに合理的に適用することは問題ありません。

以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。また、皆さんも PHP 中国語 Web サイトをサポートしていただければ幸いです。

CSS レイアウトの負のマージンに関するその他の記事やその他の実装関連の記事については、PHP 中国語 Web サイトに注目してください。