집 > 기사 > 웹 프론트엔드 > CSS에서 폭포 흐름 레이아웃을 구현하는 방법

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

青灯夜游원래의: 2021-05-13 15:54:164725검색

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

이 튜토리얼의 운영 환경: 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>
    <div>
        <div>
            <img  alt="CSS에서 폭포 흐름 레이아웃을 구현하는 방법" >
            <div>
                <img  alt="CSS에서 폭포 흐름 레이아웃을 구현하는 방법" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  alt="CSS에서 폭포 흐름 레이아웃을 구현하는 방법" >
            <div>
                <img  alt="CSS에서 폭포 흐름 레이아웃을 구현하는 방법" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  alt="CSS에서 폭포 흐름 레이아웃을 구현하는 방법" >
            <div>
                <img  alt="CSS에서 폭포 흐름 레이아웃을 구현하는 방법" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  alt="CSS에서 폭포 흐름 레이아웃을 구현하는 방법" >
            <div>
                <img  alt="CSS에서 폭포 흐름 레이아웃을 구현하는 방법" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  alt="CSS에서 폭포 흐름 레이아웃을 구현하는 방법" >
            <div>
                <img  alt="CSS에서 폭포 흐름 레이아웃을 구현하는 방법" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  alt="CSS에서 폭포 흐름 레이아웃을 구현하는 방법" >
            <div>
                <img  alt="CSS에서 폭포 흐름 레이아웃을 구현하는 방법" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  alt="CSS에서 폭포 흐름 레이아웃을 구현하는 방법" >
            <div>
                <img  alt="CSS에서 폭포 흐름 레이아웃을 구현하는 방법" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
    </div>
    <div>
        <div>
            <img  alt="CSS에서 폭포 흐름 레이아웃을 구현하는 방법" >
            <div>
                <img  alt="CSS에서 폭포 흐름 레이아웃을 구현하는 방법" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  alt="CSS에서 폭포 흐름 레이아웃을 구현하는 방법" >
            <div>
                <img  alt="CSS에서 폭포 흐름 레이아웃을 구현하는 방법" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  alt="CSS에서 폭포 흐름 레이아웃을 구현하는 방법" >
            <div>
                <img  alt="CSS에서 폭포 흐름 레이아웃을 구현하는 방법" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  alt="CSS에서 폭포 흐름 레이아웃을 구현하는 방법" >
            <div>
                <img  alt="CSS에서 폭포 흐름 레이아웃을 구현하는 방법" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  alt="CSS에서 폭포 흐름 레이아웃을 구현하는 방법" >
            <div>
                <img  alt="CSS에서 폭포 흐름 레이아웃을 구현하는 방법" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  alt="CSS에서 폭포 흐름 레이아웃을 구현하는 방법" >
            <div>
                <img  alt="CSS에서 폭포 흐름 레이아웃을 구현하는 방법" >
                <span>牵起你的左手护着你</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에서 폭포 흐름 레이아웃을 구현하는 방법

연습 후에 순수 CSS로 구현한 폭포 흐름은 오직 한 열씩 배열해야 하므로 js를 사용하여 폭포 흐름을 구현하는 것이 일반적인 폭포 흐름

(동영상 공유 학습: css 동영상 튜토리얼)

에 더 가깝습니다.

위 내용은 CSS에서 폭포 흐름 레이아웃을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：CSS를 사용하여 글꼴 색상을 설정하는 방법다음 기사：CSS를 사용하여 글꼴 색상을 설정하는 방법