가변 높이의 div 목록을 3 열 형식으로 부동

Question

이미지 div와 하단 텍스트 중 하나를 포함하는 div가 두 개 더 포함 된 제품 div 목록이 있습니다. 텍스트의 크기는 가변적이므로 외부 div 크기도 가변적입니다. 이 바깥 쪽 div는 왼쪽으로 떠서 3 행으로 이동합니다. 긴 텍스트가있는 div가 발생하면 다음 열은 그 열 바로 다음에서 시작되어 간격을두고 시작됩니다.

그래서 두 번째 div가 다른 두 번째 1 행에 3 줄의 텍스트가있는 행이있는 경우 네 번째 div는 다음 줄의 첫 번째 위치가 아니라 세 번째 행에서 시작됩니다. 여기

는 이미지는 내가 할 싶은 것이 두 번째 대 지금 무엇을보고 시연 :

그리고 내가 무엇을 목표로하고 있습니다를

Answer 1

플로트를 사용하지 마십시오. 이 바이올린에서보세요 :

JSFiddle Demo

CSS :

.block { 
    width: 33.33%; 
    display: inline-block; 
    vertical-align: top; 
    margin-right: -3px; 
} 

.inner { 
    min-height: 100px; 
    margin-bottom: 10px; 
    background: #000; 
} 

Answer 2

당신 div 요소에 대한 행을 만들 수 있으므로 필요한 레이아웃이 생성됩니다. 클래스 clearfix이 row 클래스와 동일한 기능을 수행하는 CSS 전용 솔루션도 제공했습니다!

CSS3 :

.row{ 
 
    display:flex; 
 
} 
 
.box{ 
 
    background-color:grey; 
 
    float:left; 
 
    margin:3px; 
 
    width:100px; 
 
    height:100px; 
 
}

<div class="row"> 
 
    <div class="box">1</div> 
 
    <div class="box" style="height:200px;">2</div> 
 
    <div class="box">3</div> 
 
</div> 
 
<div class="row"> 
 
    <div class="box">4</div> 
 
    <div class="box">5</div> 
 
    <div class="box">6</div> 
 
</div>

CSS :

.clearfix:after { 
 
    visibility: hidden; 
 
    display: block; 
 
    font-size: 0; 
 
    content: " "; 
 
    clear: both; 
 
    height: 0; 
 
} 
 
* html .clearfix    { zoom: 1; } /* IE6 */ 
 
*:first-child+html .clearfix { zoom: 1; } /* IE7 */ 
 

 
.box{ 
 
    background-color:grey; 
 
    float:left; 
 
    margin:3px; 
 
    width:100px; 
 
    height:100px; 
 
}

<div class="clearfix"> 
 
    <div class="box">1</div> 
 
    <div class="box" style="height:200px;">2</div> 
 
    <div class="box">3</div> 
 
</div> 
 
<div class="clearfix"> 
 
    <div class="box">4</div> 
 
    <div class="box">5</div> 
 
    <div class="box">6</div> 
 
</div>

Answer 3

HTML

<div class="flex-container"> 
<div class="box">img</div> 
<div class="box">img</div> 
<div class="box">img</div> 
</div> 
<div class="flex-container"> 
<div class="box">txt</div> 
<div class="box">txt</div> 
<div class="box">txt</div> 
</div> 

CSS

.flex-container{ 
background:red; 
display:flex; 
width:100%; 
height:auto; 
margin:0% auto; 
padding:1% 0; 
} 
.box{ 
min-width:100px; 
height:auto; 
padding:1%; 
margin:0 1%; 
flex-grow:1; 
background:green; 
} 

또한, 클리어 여부 프라하, 단하시기 바랍니다 모든

은 매우 분명 Using CSS Flexible Boxes MDNweb docs