CSS에서 폭포 흐름 레이아웃을 구현하는 방법-CSS 튜토리얼-php.cn

CSS에서 폭포 흐름 레이아웃을 구현하는 방법

青灯夜游

풀어 주다： 2023-01-06 11:13:01

원래의

4761명이 탐색했습니다.

CSS로 폭포 흐름 레이아웃을 구현하는 방법: 1. 다중 열 다중 열 레이아웃을 사용합니다. 2. 이를 달성하려면 플렉스 레이아웃을 사용하세요. 외부 레이어를 행 레이아웃으로 설정한 다음 컨테이너를 설정하고 열 레이아웃으로 설정하면 됩니다. 열을 전체적으로 처리한 다음 열을 나누고 너비를 고정합니다. 칼럼.

CSS에서 폭포 흐름 레이아웃을 구현하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

폭포 흐름의 레이아웃은 여전히 매우 매력적입니다. 최근에 폭포 흐름을 구현하는 사례를 여기에 기록했습니다. 특히 플렉스 레이아웃에서 폭포 흐름을 구현하는 것이 여전히 다소 혼란스럽다고 느꼈지만 이제는 이해할 수 있습니다. 원리는 이렇습니다

1. 다중 열 다중 열 레이아웃은 폭포 흐름을 구현합니다

먼저 다중 열과 관련된 몇 가지 속성에 대해 간략하게 설명합니다

column-count는 열 수를 설정합니다
column-gap 열과 열 설정
column-width 사이의 간격은 각 열의 너비를 설정합니다.

또한 다중 열 레이아웃, 페이지 매김 미디어 및 다중 지역 컨텍스트에서 예기치 않은 중단을 방지하기 위해 하위 컨테이너의 break-inside 설정과 결합됩니다.

break-inside属性值
  auto  指定既不强制也不禁止元素内的页/列中断。
  avoid  指定避免元素内的分页符。
  avoid-page  指定避免元素内的分页符。
  avoid-column 指定避免元素内的列中断。
  avoid-region  指定避免元素内的区域中断。

로그인 후 복사

가로채는 부분은 직접 채울 수 있습니다

/* html文件 */
<!-- 使用multi-columns实现瀑布流 -->
<div id="root">
    <div class="item">
        <img class="itemImg" src="../images/1.jpeg" alt=""/>
        <div class="userInfo">
            <img class="avatar" src="../images/gift.png" alt=""/>
            <span class="username">牵起你的左手护着你</span>
        </div>
    </div>
    <div class="item">
        <img class="itemImg" src="../images/2.jpg" alt=""/>
        <div class="userInfo">
            <img class="avatar" src="../images/gift.png" alt=""/>
            <span class="username">牵起你的左手护着你</span>
        </div>
    </div>
    <div class="item">
        <img class="itemImg" src="../images/3.jpg" alt=""/>
        <div class="userInfo">
            <img class="avatar" src="../images/gift.png" alt=""/>
            <span class="username">牵起你的左手护着你</span>
        </div>
    </div>
    <div class="item">
        <img class="itemImg" src="../images/4.jpg" alt=""/>
        <div class="userInfo">
            <img class="avatar" src="../images/gift.png" alt=""/>
            <span class="username">牵起你的左手护着你</span>
        </div>
    </div>
    <div class="item">
        <img class="itemImg" src="../images/5.jpeg" alt=""/>
        <div class="userInfo">
            <img class="avatar" src="../images/gift.png" alt=""/>
            <span class="username">牵起你的左手护着你</span>
        </div>
    </div>
</div>

로그인 후 복사

/* css样式 */
body {
    background: #e5e5e5;
}
/* 瀑布流最外层 */
#root {
     margin: 0 auto;
     width: 1200px;
     column-count: 5;
     column-width: 240px;
     column-gap: 20px;
}
/* 每一列图片包含层 */
.item {
     margin-bottom: 10px;
     /* 防止多列布局，分页媒体和多区域上下文中的意外中断 */
     break-inside: avoid;
     background: #fff;
}
.item:hover {
     box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
}
/* 图片 */
.itemImg {
     width: 100%;
     vertical-align: middle;
}
/* 图片下的信息包含层 */
.userInfo {
     padding: 5px 10px;
}
.avatar {
     vertical-align: middle;
     width: 30px;
     height: 30px;
     border-radius: 50%;
}
.username {
     margin-left: 5px;
     text-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
}

로그인 후 복사

CSS에서 폭포 흐름 레이아웃을 구현하는 방법

2.flex 레이아웃은 폭포 흐름을 구현합니다

외부 레이어를 행 레이아웃으로 설정한 다음 컨테이너를 설정하고 다음으로 설정합니다. 열을 전체적으로 사용하고 열을 나누어 열의 너비를 고정하는 열 레이아웃

/* html文件（只截取两列布局）*/
<div id="root">
    <div class="itemContainer">
        <div class="item">
            <img class="itemImg" src="../images/1.jpeg" alt=""/>
            <div class="userInfo">
                <img class="avatar" src="../images/gift.png" alt=""/>
                <span class="username">牵起你的左手护着你</span>
            </div>
        </div>
        <div class="item">
            <img class="itemImg" src="../images/2.jpg" alt=""/>
            <div class="userInfo">
                <img class="avatar" src="../images/gift.png" alt=""/>
                <span class="username">牵起你的左手护着你</span>
            </div>
        </div>
        <div class="item">
            <img class="itemImg" src="../images/3.jpg" alt=""/>
            <div class="userInfo">
                <img class="avatar" src="../images/gift.png" alt=""/>
                <span class="username">牵起你的左手护着你</span>
            </div>
        </div>
        <div class="item">
            <img class="itemImg" src="../images/4.jpg" alt=""/>
            <div class="userInfo">
                <img class="avatar" src="../images/gift.png" alt=""/>
                <span class="username">牵起你的左手护着你</span>
            </div>
        </div>
        <div class="item">
            <img class="itemImg" src="../images/5.jpeg" alt=""/>
            <div class="userInfo">
                <img class="avatar" src="../images/gift.png" alt=""/>
                <span class="username">牵起你的左手护着你</span>
            </div>
        </div>
        <div class="item">
            <img class="itemImg" src="../images/6.jpeg" alt=""/>
            <div class="userInfo">
                <img class="avatar" src="../images/gift.png" alt=""/>
                <span class="username">牵起你的左手护着你</span>
            </div>
        </div>
        <div class="item">
            <img class="itemImg" src="../images/7.jpeg" alt=""/>
            <div class="userInfo">
                <img class="avatar" src="../images/gift.png" alt=""/>
                <span class="username">牵起你的左手护着你</span>
            </div>
        </div>
    </div>
    <div class="itemContainer">
        <div class="item">
            <img class="itemImg" src="../images/5.jpeg" alt=""/>
            <div class="userInfo">
                <img class="avatar" src="../images/gift.png" alt=""/>
                <span class="username">牵起你的左手护着你</span>
            </div>
        </div>
        <div class="item">
            <img class="itemImg" src="../images/7.jpeg" alt=""/>
            <div class="userInfo">
                <img class="avatar" src="../images/gift.png" alt=""/>
                <span class="username">牵起你的左手护着你</span>
            </div>
        </div>
        <div class="item">
            <img class="itemImg" src="../images/6.jpeg" alt=""/>
            <div class="userInfo">
                <img class="avatar" src="../images/gift.png" alt=""/>
                <span class="username">牵起你的左手护着你</span>
            </div>
        </div>
        <div class="item">
            <img class="itemImg" src="../images/5.jpeg" alt=""/>
            <div class="userInfo">
                <img class="avatar" src="../images/gift.png" alt=""/>
                <span class="username">牵起你的左手护着你</span>
            </div>
        </div>
        <div class="item">
            <img class="itemImg" src="../images/6.jpeg" alt=""/>
            <div class="userInfo">
                <img class="avatar" src="../images/gift.png" alt=""/>
                <span class="username">牵起你的左手护着你</span>
            </div>
        </div>
        <div class="item">
            <img class="itemImg" src="../images/6.jpeg" alt=""/>
            <div class="userInfo">
                <img class="avatar" src="../images/gift.png" alt=""/>
                <span class="username">牵起你的左手护着你</span>
            </div>
        </div>
    </div>
</div>

로그인 후 복사

/* css文件 */
body{
   background: #e5e5e5;
}
#root{
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    width: 1200px;
}
.itemContainer{
    margin-right: 10px;
    flex-direction: column;
    width: 240px;
}
.item{
   margin-bottom: 10px;
   background: #fff;
}
.itemImg{
   width: 100%;
}
.userInfo {
   padding: 5px 10px;
}
.avatar {
   vertical-align: middle;
   width: 30px;
   height: 30px;
   border-radius: 50%;
}
.username {
   margin-left: 5px;
   text-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
}

로그인 후 복사

CSS에서 폭포 흐름 레이아웃을 구현하는 방법