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

最近フォトアルバムのページを作成したのですが、最初に直面した問題はそれをどう配置するかでした。この記事では、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. 画像の比率が崩れません

関連する推奨事項:

フォトアルバムエフェクトのおすすめ記事10選

今日のおすすめ：超使いやすいJSフォトアルバムエフェクト10選

CSS3によるかっこいい3次元フォトアルバムエフェクト例

以上がフォトアルバムの完璧な横配置を実現するCSSメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。