ホームページ > 記事 > ウェブフロントエンド > フォトアルバムの完璧な横配置を実現するCSSメソッド

フォトアルバムの完璧な横配置を実現するCSSメソッド

小云云オリジナル: 2017-12-13 14:27:222636ブラウズ

最近フォトアルバムのページを作成したのですが、最初に直面した問題はそれをどう配置するかでした。この記事では、CSS を使用してフォトアルバムを完璧に横方向に配置する例を紹介します。興味のある方はぜひご覧ください。

分析すると、コンテナーがあり、コンテナーにはパディングがあり、各行の各項目の間にマージンがあることが最初に思い浮かびます

<pre class="brush:css;toolbar:false">.container 
{        padding: 10px; 
   }       
     .container .item 
     {        float: left;        width: 24%;        margin-left: 1%;        border: 1px solid #CCC;  
       }

しかし、この状況ではまず 2 つの問題が発生します。 1 つ目は、項目自体の margin-left に .container のパディングを加えたものです。これにより、左マージンが上下左右よりも大きくなり、項目間の垂直方向と水平方向の間隔も制御されなくなります。同じサイズ。
そこで calc 属性を使うことを考えました

<pre class="brush:css;toolbar:false">.
container {        padding: 5px;    }      
   .container .item 
   {        width: 25%;        position: relative;        float: left;    }    
        /* 这个图片仅仅是为了获取宽高，实际是看不见的 */    .container .item > 
        img {        opacity: 0;        width: 100%;       }       
               /* 这个才是每一个item里容器    .container .item .body
                {        border: 1px solid #CCC;        width: calc(100% - 10px); 
                       height: calc(100% - 10px);  
                            margin: auto;   
                                 left: 0;   
                                      top: 0;  
                                            bottom: 0;  
                                                  right: 0;  
                                                    }

上記のコードを sass で実装すると簡単になるのですが、この実装方法は実際に各項目のサイズの 25% を占めることに相当しますが、内部のボディはすべて上下になります。 , 左右に5pxの余白があります。項目と項目の間のマージンは、実際には、各項目の右の間隔に右の項目の左のマージンを加えたもの、および各項目の下のマージンにその下の項目の上のマージンを加えたものです。

この実装方法にはいくつかの利点があります:

1. 上下左右の余白が同じです
2. 画像の比率が崩れません

フォトアルバムの完璧な横配置を実現するCSSメソッド

関連記事