CSS實(shí)現(xiàn)相冊橫向完美排布方法

最近要做一個相冊頁面，碰到的第一個問題就是如何排布。本文我們將帶大家來看一個關(guān)于CSS解決相冊橫向完美排布例子的，希望這個例子能夠?yàn)楦魑煌瑢W(xué)帶來幫助了，有興趣的一起來看看吧。

分析一下，有一個容器，容器有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; 
 }
 </pre>

然而，這種情況會造成兩個問題，首先第一個是第一個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; } 
 /* 這個圖片僅僅是為了獲取寬高，實(shí)際是看不見的 */ .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; 
       }
       </pre>

以上代碼如果要是用sass來實(shí)現(xiàn)的話，更容易了，這種實(shí)現(xiàn)方法相當(dāng)于實(shí)際上每一個item占用的大小就是25%，只是里面的body都上下左右都有5px的邊距。item與item之間的邊距實(shí)際上就是每一個item的右間距加上右邊item的左邊距，每一個item的下邊距加上它下方item的上邊距。

這種實(shí)現(xiàn)方法有幾個好處：

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

相關(guān)推薦：

關(guān)于相冊效果的10篇文章推薦

今日推薦：十款超好用的JS相冊特效

CSS3制作酷炫的三維相冊效果示例

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:0731-84117792 E-MAIL:11247931@qq.com