복수 행에 걸쳐 여러 텍스트 블록을 상단 정렬하는 방법

Question

상단으로 전체 너비 내용 bin이 있지만 아래쪽에 여러 열 및 행으로 나뉘는 웹 페이지를 상상해보십시오. 각 bin (1 열 하나의 행)가 있습니다. 내용의 양이 다를 수 있으므로 이러한 저장소가 모두 동일한 높이가 아닐 수도 있습니다.

나는 어쩌면 뭔가처럼 빈에 대한 CSS 유형을 작성하고 싶습니다 :

는

div.bin 
{ 
float:left; 
padding:1.0em; 
box-sizing: border-box; 
width: 25%; 
} 

일부 큰 <div style="width:100%"> 용기 내부 행에 <div class="bin"> CONTENTS </div> 요소의 변수 수있을 것입니다.

bin 요소가 4 개 이상인 경우 첫 번째 4 개는 행에 표시되고 다음 4 개는 다른 행에 표시되는 등 목표가됩니다. 빈 수를 지정하지 않아도됩니다 4의 배수

내가 겪고있는 문제는 두 번째 행이 이전 4 개 중 가장 긴 바로 아래의 수직 위치에 깔끔하게 표시되지 않는다는 것입니다. 대신에, 두 번째 것이 여분이라면, 다섯 번째 것은 뒤로 감쌀 것이고, bin # 2의 하강 조각에 충돌 할 때까지 왼쪽으로 떠서 열 3에 그 자체를 표시함으로써 전체 프리젠 테이션을 엉망이게 할 것입니다.

랩퍼 DIV 내에서 한 번에 4 개씩 배치하여이 문제를 해결할 수 있지만 유연성이 부족합니다.

이상적으로는 뷰포트가 작아지면서 bin의 width 속성을 33 %, 50 % 및 100 %로 다시 정의하여 모든 것을 반응 적으로 만들 수 있기를 바랍니다. 물론이 작업을 수행하려면 bin을 하위 집합 컨테이너 DIV에 배치 할 수 없습니다.

아이디어가 있으십니까?

문제의 그림

다섯 번째는 그것이 더 이상 4

것보다 당신이 볼 수 있듯이 4 전에 처음의 뒤 가장자리에 범프 래핑 6에서 9까지, 위쪽 모서리가 제대로 결정된 후 잘 표시됩니다.

그래서, 질문은 ... 상자 1 ~ 4의 가장 긴의 아래쪽 가장자리에 의거

참고 표시 상자 5 강제하는 방법 : 문제가 상자 (5)를 얻는 방법 아니다 구체적으로 포장하기 정확히. 어떤 포장지가 포장할지 여부를 모르는 경우에도 상자를 올바르게 포장하는 방법입니다 (예를 들어, 보관통의 너비가 25 %에서 33.33 %로 변경되거나 다른 항목으로 변경된 경우).

Answer 1

참고 : 사진이 표시되지 않으므로 원하는 부분을 추측하고 공백을 제거하십시오.

벽돌집을 사용하십시오 (원하는대로 클래스 이름을 지정할 수 있습니다). 결과는 텍스트 일 ​​수 있습니다.

HTML

<div class="masonry"> 
    <div class="item"><img src="example.com/1.jpg"></div> 
    <div class="item"><img src="example.com/2.jpg"></div> 
    <div class="item"><img src="example.com/3.jpg"></div> 
    <div class="item"><img src="example.com/4.jpg"></div> 
    <div class="item"><img src="example.com/5.jpg"></div> 
    <div class="item"><img src="example.com/6.jpg"></div> 
    <div class="item"><img src="example.com/7.jpg"></div> 
    <div class="item"><img src="example.com/8.jpg"></div> 
</div> 

CSS

.masonry { /* Masonry container */ 
    column-count: 4; 
    column-gap: 1em; 
} 

.item { /* Masonry bricks or child elements */ 
    background-color: #eee; 
    display: inline-block; 
    margin: 0 0 1em; 
    width: 100%; 
} 

응답 CSS

.masonry { 
    margin: 1.5em 0; 
    padding: 0; 
    -moz-column-gap: 1.5em; 
    -webkit-column-gap: 1.5em; 
    column-gap: 1.5em; 
    font-size: .85em; 
} 

.item { 
    display: inline-block; 
    background: #fff; 
    padding: 1em; 
    margin: 0 0 1.5em; 
    width: 100%; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-shadow: 2px 2px 4px 0 #ccc; 
} 

@media only screen and (min-width: 400px) { 
    .masonry { 
     -moz-column-count: 2; 
     -webkit-column-count: 2; 
     column-count: 2; 
    } 
} 

@media only screen and (min-width: 700px) { 
    .masonry { 
     -moz-column-count: 3; 
     -webkit-column-count: 3; 
     column-count: 3; 
    } 
} 

@media only screen and (min-width: 900px) { 
    .masonry { 
     -moz-column-count: 4; 
     -webkit-column-count: 4; 
     column-count: 4; 
    } 
} 

@media only screen and (min-width: 1100px) { 
    .masonry { 
     -moz-column-count: 5; 
     -webkit-column-count: 5; 
     column-count: 5; 
    } 
} 

@media only screen and (min-width: 1280px) { 
    .wrapper { 
     width: 1260px; 
    } 
} 

01 2,378,615,345,763,816,

Answer 2

또는, 플렉스 박스를 사용할 수는 : https://jsfiddle.net/2t1bzjk9/

#container { 
 
    background: black; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
div.bin { 
 
flex: 1 0 25%; 
 
padding:1.0em; 
 
box-sizing: border-box; 
 
width: 25%; 
 
background: white; 
 
    border: 1px solid red; 
 
}

<div id="container"> 
 
    <div class="bin"> 
 
    <p> 
 
    some content 
 
    </p> 
 
    </div> 
 
    <div class="bin"> 
 
    <p> 
 
    some content some content some content some content some content some content some content some content some content some content some content some content some content 
 
    </p> 
 
    </div> 
 
    <div class="bin"> 
 
    <p> 
 
    some content 
 
    </p> 
 
    </div> 
 
    <div class="bin"> 
 
    <p> 
 
    some content 
 
    </p> 
 
    </div> 
 
<div class="bin"> 
 
    <p> 
 
    some content 
 
    </p> 
 
    </div> <div class="bin"> 
 
    <p> 
 
    some content 
 
    </p> 
 
    </div> <div class="bin"> 
 
    <p> 
 
    some content 
 
    </p> 
 
    </div> <div class="bin"> 
 
    <p> 
 
    some content 
 
    </p> 
 
    </div> <div class="bin"> 
 
    <p> 
 
    some content 
 
    </p> 
 
    </div> <div class="bin"> 
 
    <p> 
 
    some content 
 
    </p> 
 
    </div> 
 
</div>