首頁 > web前端 > css教學 > 主體

CSS實作相簿橫向完美排布方法

小云云
發布: 2017-12-13 14:27:22
原創
2695 人瀏覽過

最近要做一個相簿頁面,碰到的第一個問題就是如何排布。本文我們將帶大家來看一個關於CSS解決相簿橫向完美排布例子的,希望這個例子能夠為各位同學帶來幫助了,有興趣的一起來看看吧。

分析一下,有一個容器,容器有padding,每一行的每一個item之間又有margin,首先想到的是這樣

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

然而,這種情況會造成兩個問題,首先第一個是第一個item自身的margin-left加上.container的padding會造成左邊空白比上下左右都要大,還會造成item與item之間的垂直間距與水平間距不能控製到一樣的大小。
於是考慮到使用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來實現的話,更容易了,這種實作方法相當於實際上每一個item佔用的大小就是25%,只是裡面的body都上下左右都有5px的邊距。 item與item之間的邊距其實就是每一個item的右間距加上右邊item的左邊距,每一個item的下邊距加上它下方item的上邊距。

這種實作方法有幾個好處:


#1、上下左右都是一樣的邊距
2、純樣式
3、圖片比例不會被破壞

 相關推薦:

關於相簿效果的10篇文章推薦

今日推薦:十款超好用的JS相簿特效

CSS3製作酷炫的三維相簿效果範例

以上是CSS實作相簿橫向完美排布方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板