CSS 튜토리얼

순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법

不言

Sep 04, 2018 am 09:44 AM

cssflex폭포 흐름 레이아웃

폭포 흐름의 레이아웃은 상당히 좋은 느낌이므로 이 기사에서는 폭포 흐름을 구현하는 다중 열 다중 열 레이아웃과 폭포 흐름을 구현하는 플렉스 레이아웃을 통해 CSS에서 폭포 흐름 레이아웃을 구현하는 두 가지 방법을 공유하겠습니다.

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

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

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

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

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

Interception 해당 부분은 직접 채워주시면 됩니다

/* html文件 */
<!-- 使用multi-columns实现瀑布流 -->
<div>
    <div>
        <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/1.jpeg" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
        <div>
            <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
            <span>牵起你的左手护着你</span>
        </div>
    </div>
    <div>
        <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/2.jpg" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
        <div>
            <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
            <span>牵起你的左手护着你</span>
        </div>
    </div>
    <div>
        <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/3.jpg" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
        <div>
            <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
            <span>牵起你的左手护着你</span>
        </div>
    </div>
    <div>
        <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/4.jpg" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
        <div>
            <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
            <span>牵起你的左手护着你</span>
        </div>
    </div>
    <div>
        <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/5.jpeg" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
        <div>
            <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
            <span>牵起你的左手护着你</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를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법

(폭포 흐름 레이아웃 렌더링 1)

순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법

2. Flex 레이아웃 구현 폭포 흐름

will 외부 레이어는 행 레이아웃으로 설정되고 컨테이너는 열 레이아웃으로 설정됩니다. 열을 전체적으로 처리한 다음 열을 나누고 열의 너비를 고정하면 됩니다

/* html文件（只截取两列布局）*/
<div>
    <div>
        <div>
            <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/1.jpeg" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
            <div>
                <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/2.jpg" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
            <div>
                <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/3.jpg" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
            <div>
                <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/4.jpg" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
            <div>
                <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/5.jpeg" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
            <div>
                <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/6.jpeg" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
            <div>
                <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/7.jpeg" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
            <div>
                <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
    </div>
    <div>
        <div>
            <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/5.jpeg" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
            <div>
                <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/7.jpeg" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
            <div>
                <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/6.jpeg" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
            <div>
                <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/5.jpeg" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
            <div>
                <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/6.jpeg" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
            <div>
                <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/6.jpeg" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" >
            <div>
                <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? 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에서 폭포 흐름을 구현하는 두 가지 방법

(Waterfall 흐름 레이아웃 렌더링 2)

실습을 해본 결과 순수 CSS로 구현한 Waterfall 흐름은 열 단위로만 정렬할 수 있다는 것을 알았으므로 여전히 js를 사용해야 합니다. 일반적인 폭포 흐름과 더 일치하는 폭포 흐름 레이아웃을 실현합니다.

핫 AI 도구

뜨거운 도구

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는