div+css 이미지 목록 레이아웃 (1)

프런트 엔드에서 이미지를 커팅하다 보면 초보자에게는 생소할 수 있는 이미지 레이아웃을 자주 접하게 됩니다. 다음으로 3행 3열 그림 목록을 사용하여 일반적으로 사용되는 두 가지 그림 자르기 방식을 소개하겠습니다.

• 플로트 레이아웃

• display:inline-block 레이아웃

먼저 float 레이아웃 방식에 대해 이야기해 보겠습니다.

float 레이아웃

일반적으로 저는 ul li 레이아웃

    <ul>
        <li><img src="./images/1.jpg"></li>
        <li><img src="./images/2.jpg"></li>
        <li><img src="./images/3.jpg"></li>
        <li><img src="./images/4.jpg"></li>
        <li><img src="./images/5.jpg"></li>
        <li><img src="./images/6.jpg"></li>
        <li><img src="./images/7.jpg"></li>
        <li><img src="./images/8.jpg"></li>
        <li><img src="./images/9.jpg"></li>
    </ul>

을 사용한 다음 각 li 요소의 너비를 설정하고 왼쪽에 띄웁니다. 여기서 각 행은 3개의 그림을 표시해야 하므로 각 그림의 너비는 백분율(100/3=33.3%)을 사용하여 계산할 수 있습니다.

li {
    list-style: none;
    float: left;
    width: 33.3%;/*三列图片排列*/
}

각 img 태그의 너비는 100%로 설정되어 li의 전체 너비를 차지하며, 이미지 변형을 방지하기 위해 높이가 적응됩니다

li {
    list-style: none;
    float: left;
    width: 33.3%;/*三列图片排列*/
}

li img {
    width: 100%;
}

자, 효과를 살펴보세요.

왜 우리가 생각했던 것과 다른가요? 이 시점에서 목록은 혼란스럽습니다. 걱정하지 마세요. 이미지의 크기가 다르기 때문입니다. 프로젝트 내 이미지의 크기가 너무 다를 경우 상위 요소에 고정 높이를 설정하고 숨김 이상으로 설정하는 것이 좋습니다. 그러나 이미지 크기가 크게 다르지 않은 경우 적응력이 높은 목적을 달성하려면 height: auto;를 설정하는 것이 좋습니다. 예 학생들은 상단 대신 여백 상단을 사용하는 것을 생각할 수 있습니다. 여기서 주목해야 할 점은 margin-top과 margin-bottom의 비율은 일반적으로 높이가 아닌 컨테이너 요소의 너비를 기준으로 계산된다는 점입니다. 패딩

도 마찬가지입니다.

여기서 기본적으로 행 3개, 열 3개의 기본 이미지 레이아웃이 완성되었습니다.

그러나 초보자가 간과할 수 있는 숨겨진 문제가 있습니다. 즉, 하위 요소가 부동된 후 상위 컨테이너가 축소되는 경우가 있습니다. 이 기능은 때때로 레이아웃에 심각한 영향을 미칩니다. 테스트해 보겠습니다. ul 요소 앞뒤에 p 요소

li {
    list-style: none;
    float: left;
    width: 33.3%;/*三列图片排列*/
    height: 100px;/*当图片尺寸不一的时候，设置一个高度*/
    overflow: hidden;/*超出隐藏*/
}

를 추가하면 .blue 요소가 .red 요소 옆에 있고 ul 요소가 존재하지 않는 것처럼 동작하는 것을 볼 수 있습니다

플로팅 후 요소가 문서 흐름에서 분리되기 때문입니다. 플로팅의 원리에 대해서는 w3school의 CSS 플로팅 속성과 플로팅 속성을 참조하면 됩니다. 여기서는 반복하지 않겠습니다. 플로트를 제거하는 방법에는 여러 가지가 있습니다. 의사 요소 뒤에 플로트를 제거하는 것이 좋습니다.

li img {
    position: relative;
    width: 100%;
    top: 50%;/*li高度的一半*/
    transform: translateY(-50%); /*再向上移动自身的50%*/
}

성능이 정상인지 살펴보겠습니다.

display:inline -block 레이아웃

은 float: left;를 display: inline-block;

.red{
    width: 100%;
    height: 30px;
    border: 1px solid red;
}
.blue{
    width: 100%;
    height: 30px;
    border: 1px solid blue;
}    
    
<p class="red"></p>
<ul>...</ul>
<p class="blue"></p>

효과를 보니 틈이 생겨서 두 줄로 눌려졌습니다. 무슨 일이야? ~

인라인 블록 요소 사이에 간격이 있을 수 있으므로 자세한 내용은 Zhang Xinxu의 블로그를 참조하세요. 여기서는

.clearfix:after{
    position: relative;
    content: '';
    display: block;
    width: 0;
    height: 0;
    visibility: hidden;
    clear: both;
}

<p class="red"></p>
<ul class="clearfix">...</ul>
<p class="blue"></p>

요소 사이의 간격을 없애기 위해 글꼴 크기: 0; 메서드를 사용합니다. 이로써 우리가 원하는 효과가 완성됩니다. 아주 간단하지 않나요?

div+css 이미지 목록 레이아웃 더보기 (1) 관련 글은 PHP 중국어 홈페이지를 주목해주세요!