집 > 기사 > 웹 프론트엔드 > 사진 앨범의 완벽한 수평 배열을 구현하는 CSS 방법

사진 앨범의 완벽한 수평 배열을 구현하는 CSS 방법

小云云원래의: 2017-12-13 14:27:222634검색

최근 사진첩 페이지를 만들었는데, 가장 먼저 접한 문제는 정리 방법이었습니다. 이 기사에서는 CSS를 사용하여 사진 앨범의 완벽한 가로 배열을 해결하는 예를 보여 드리겠습니다. 관심이 있는 경우 이 예가 모든 학생들에게 도움이 되기를 바랍니다.

분석해 보면 컨테이너가 있고, 컨테이너에 패딩이 있고, 각 행의 각 항목 사이에 마진이 있다는 것입니다.

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

그러나 이러한 상황은 우선 두 가지 문제를 야기합니다. 첫 번째는 항목 자체의 왼쪽 여백과 .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. 사진 비율이 파괴되지 않습니다

사진 앨범의 완벽한 수평 배열을 구현하는 CSS 방법

관련 기사