CSS 레이아웃 - 부유물 : ... 위로?

Question

플로팅 블록이 플로트 방향뿐만 아니라 위쪽으로 채워지는 기법 (코드화되거나 해킹 됨)이 있습니까?

과 같이 뭔가 -

내가이가 Masonry 같은 자바 스크립트 라이브러리에 의해 수행됩니다 실현

된다.

이 작업이나 유사한 작업을 수행하기위한 CSS 방법이 있는지 궁금합니다.

---

https://codepen.io/2nj2nu7p9oVLGXKS4tIpu8eILcmoXg/pen/QOdmqw

단순히 그냥 연한 파랑 (홀수) 요소 float: left 및 블루 (도) 요소를 만들어

body * { 
    box-sizing: border-box; 
} 

.wrapper { 
    max-width: 500px; 
    background: limegreen; 
    margin-left: auto; 
    margin-right: auto; 
    overflow: hidden; 
} 

.block { 
    height: 100px; 
    background: lightblue; 
    width: 250px; 
    float: left; 
    border: solid 2px; 

    &:nth-child(even) { 
     background: blue; 
     height: 150px; 
    } 
} 

Answer 1

codepen 관련 float: right이 좀 어때

:

을

body * { 
 
    box-sizing: border-box; 
 
    float: left; 
 
} 
 

 
.wrapper { 
 
    max-width: 500px; 
 
    background: limegreen; 
 
} 
 

 
.block { 
 
    height: 100px; 
 
    background: lightblue; 
 
    width: 250px; 
 
    border: solid 2px; 
 
    vertical-align: top; 
 
} 
 

 
.block:nth-child(even) { 
 
    float: right; 
 
    background: blue; 
 
    height: 150px; 
 
}

<div class="wrapper"> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
</div>