CSS实现相册横向完美排布方法

小云云
Lepaskan: 2017-12-13 14:27:22
asal
2700 orang telah melayarinya

最近要做一个相册页面,碰到的第一个问题就是如何排布。本文我们将带大家来看一个关于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;  
       }
       
Salin selepas log masuk

然而,这种情况会造成两个问题,首先第一个是第一个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;  
                                                    }
                                                    
Salin selepas log masuk

以上代码如果要是用sass来实现的话,更容易了,这种实现方法相当于实际上每一个item占用的大小就是25%,只是里面的body都上下左右都有5px的边距。item与item之间的边距实际上就是每一个item的右间距加上右边item的左边距,每一个item的下边距加上它下方item的上边距。

这种实现方法有几个好处:


1、上下左右都是一样的边距
2、纯样式
3、图片比例不会被破坏

 相关推荐:

关于相册效果的10篇文章推荐

今日推荐:十款超好用的JS相册特效

CSS3制作酷炫的三维相册效果示例

Atas ialah kandungan terperinci CSS实现相册横向完美排布方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan