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

이 글에서는 여러분이 저의 지난 글 p+css 이미지 목록 레이아웃(1)을 이미 읽었다고 가정합니다. 다음으로, 좀 더 복잡한 이미지 목록 레이아웃을 구현하겠습니다. 다음 스타일을 예로 들어보겠습니다.

편의상 디스플레이:인라인 블록 레이아웃 예제만 나열합니다.

이전 기사에서 소개한 것처럼 첫 번째 단계는 상위 컨테이너 li 요소의 너비를 정의하는 것입니다.

li {
    list-style: none;
    display: inline-block;
    width: 33.3%;
    /*三列图片排列*/
    text-align: center;
    /*内容居中*/
    overflow: hidden;
    /*超出隐藏*/
    vertical-align: bottom;
    /*内容底部对齐*/
}

이미지 목록의 행과 열 사이에 간격이 있습니다. 컨테이너 p.content는 콘텐츠를 래핑하고 .content의 너비를 상위 컨테이너의 80%로 설정하며 상단 및 하단 패딩(paddind)은 약 20px입니다.

.content {
    width:80%;
    padding: 10px 0;
    overflow: hidden;
}
    
<li>
    <p class="content">
        ...
    </p>
</li>

각 그림의 배경은 흰색입니다. 그리고 테두리를 줄 수 있습니다. 사진이 다른 용기 레이어로 덮여 있습니다

.img-wrap {
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
}
<li>
    <p class="content">
        <p class="img-wrap">
            <img src="1.jpg">
        </p>
    </p>
</li>

효과는 다음과 같습니다

저희 사진 자료의 크기가 너무 다르면 높이가 고르지 않게 보입니다. 정렬이 필요한 경우 display: inline-block;을 정의하는 상위 컨테이너에서 수직 정렬: 하단을 사용할 수 있습니다. 여기서 높이를 통일하기 위해서는 img 태그에 또 다른 p 레이어를 추가하여 높이를 제한해야 합니다.

.img-box {
    height: 120px;
    overflow: hidden;
}
.img-box img {
    position: relative;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}
    
<li>
    <p class="content">
        <p class="img-wrap">
            <p class="img-box">
                <img src="1.jpg">
            </p>
        </p>
    </p>
</li>

효과는 다음과 같습니다

img 요소에 높이와 너비를 직접 설정하는 것은 일반적으로 권장되지 않습니다. 크기가 고정되어 있지 않으면 변형이 발생할 수 있습니다. 고정 너비 및 적응형 높이(또는 고정 높이 및 적응형 너비) 방법을 채택할 수 있습니다. 그런 다음 img 요소의 외부 레이어에 컨테이너를 놓고 너비와 높이를 수정한 다음 Overflow: Hidden;으로 설정합니다. 그런 다음 .content의 스타일을 수정하고, 너비를 정의하지 않고, 패딩을 사용하여 주변 공간을 나타내고, box-sizing 속성을 border-box로 설정해야 합니다.

좋아 완벽해~

다음에 제목을 추가하세요

.title{
    padding-top: 12px;
    font-size: 12px;
    color: #454545;
}
    
<li>
    <p class="content">
        <p class="img-wrap">
            <p class="img-box">
                <img src="1.jpg">
            </p>
        </p>
        <p class="title">图片标题</p>
    </p>
</li>

효과는 아래와 같습니다

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