순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법
- 不言원래의
- 2018-09-04 09:44:4016568검색
폭포 흐름의 레이아웃은 상당히 좋은 느낌이므로 이 기사에서는 폭포 흐름을 구현하는 다중 열 다중 열 레이아웃과 폭포 흐름을 구현하는 플렉스 레이아웃을 통해 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 alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <span>牵起你的左手护着你</span> </div> </div> <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <span>牵起你的左手护着你</span> </div> </div> <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <span>牵起你的左手护着你</span> </div> </div> <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <span>牵起你的左手护着你</span> </div> </div> <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <div> <img 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);
}
(폭포 흐름 레이아웃 렌더링 1)
2. Flex 레이아웃 구현 폭포 흐름
-
will 외부 레이어는 행 레이아웃으로 설정되고 컨테이너는 열 레이아웃으로 설정됩니다. 열을 전체적으로 처리한 다음 열을 나누고 열의 너비를 고정하면 됩니다
/* html文件（只截取两列布局）*/ <div> <div> <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <span>牵起你的左手护着你</span> </div> </div> <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <span>牵起你的左手护着你</span> </div> </div> <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <span>牵起你的左手护着你</span> </div> </div> <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <span>牵起你的左手护着你</span> </div> </div> <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <span>牵起你的左手护着你</span> </div> </div> <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <span>牵起你的左手护着你</span> </div> </div> <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <span>牵起你的左手护着你</span> </div> </div> </div> <div> <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <span>牵起你的左手护着你</span> </div> </div> <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <span>牵起你的左手护着你</span> </div> </div> <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <span>牵起你的左手护着你</span> </div> </div> <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <span>牵起你的左手护着你</span> </div> </div> <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <span>牵起你的左手护着你</span> </div> </div> <div> <img alt="순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법" > <div> <img 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);
}
(Waterfall 흐름 레이아웃 렌더링 2)
실습을 해본 결과 순수 CSS로 구현한 Waterfall 흐름은 열 단위로만 정렬할 수 있다는 것을 알았으므로 여전히 js를 사용해야 합니다. 일반적인 폭포 흐름과 더 일치하는 폭포 흐름 레이아웃을 실현합니다.
관련 권장 사항:
위 내용은 순수 CSS를 사용하여 폭포 흐름을 구현하는 방법은 무엇입니까? CSS에서 폭포 흐름을 구현하는 두 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.