最近要做一個相簿頁面，碰到的第一個問題就是如何排布。本文我們將帶大家來看一個關於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、圖片比例不會被破壞
相關推薦：
以上是CSS實作相簿橫向完美排布方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
