응답 성있는 레이아웃을 유지하면서 div 높이를 가장 높게 설정하십시오.

Question

이미지와 텍스트가 포함 된 일련의 div가있는 매우 간단한 페이지가 있습니다. 이미지의 방향과 텍스트의 양이 다르다는 것은 각 div가 다른 높이가된다는 것을 의미합니다. 수동으로 높이를 설정하는 것보다 짧아서 응답 성있는 레이아웃을 유지하면서 각 div를 가장 높은 높이와 일치시키는 방법이 있습니까? 나는 컨테이너에서 그들을 포장하고 display : flex를 사용하여 트릭을 만들었지 만 반응 형 레이아웃을 죽였다. div는 더 이상 브라우저 크기에 따라 너비를 재설정 할 수 없으므로 페이지가 제대로 리플 로우되지 않을 것이다.

온라인으로 jquery 예제를 몇 개 찾았지만 그 이유는 알 수없는 이유로 작동하지 못했습니다. 누군가가 해결책을 갖고 있다면 나는 언제나 다시 시도 할 수 있습니다.

페이지의 기본 레이아웃은 현재 :

@charset "utf-8"; 
 

 
* { 
 
    box-sizing: border-box; 
 
} 
 
[class*="col-"] { 
 
    float: left; 
 
    padding: 15px; 
 
    border: 1px solid red; 
 
    text-align: center; 
 
} 
 
.clear { 
 
    clear: both 
 
} 
 
html { 
 
    font-family: Verdana, Geneva, sans-serif; 
 
} 
 
p { 
 
    font-size: 11px 
 
} 
 
a, 
 
a:hover, 
 
a:active, 
 
a:visited { 
 
    color: #ffffff; 
 
} 
 
a.textlink, 
 
a.textlink:hover, 
 
a.textlink:active, 
 
a.textlink:visited { 
 
    color: #000000; 
 
} 
 
/* For mobile phones: */ 
 

 
[class*="col-"] { 
 
    width: 100%; 
 
} 
 
@media only screen and (min-width: 600px) { 
 
    /* For tablets: */ 
 
    .col-m-1 { 
 
    width: 50%; 
 
    } 
 
} 
 
@media only screen and (min-width: 768px) { 
 
    /* For desktop: */ 
 
    .col-1 { 
 
    width: 20%; 
 
    } 
 
} 
 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
}

<div class="container"> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /><br /> 
 
    Some text<br />And more text 
 
    </div> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /><br /> 
 
    Some text<br />And more text 
 
    </div> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /><br /> 
 
    Some text<br />And more text 
 
    </div> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /><br /> 
 
    Some text<br />And more text 
 
    </div> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /><br /> 
 
    Some text<br />And more text 
 
    </div> 
 
    <!-- and so on. The divs will, once I have this layout sorted, be 
 
    populated by XML/XSL and could be anywhere from 1 to over 200 of them. --> 
 
</div>

나는 별도의 클래스 COL-m-1없이, 태블릿 기반의 레이아웃이 작동하지 않을 것을 발견했다. (나는 반응 형 레이아웃에 특히 익숙하지 않았기 때문에이 방법을 권장하는 W3C 튜토리얼을 따라 갔다.)

Answer 1

당신은 flex와 함께 올바른 길을 가고 있었다. 나는 당신이 놓친 것이 플렉스 랩을 컨테이너에 추가하는 것이라고 생각한다. :

@charset "utf-8"; 
 

 
/* CSS Document */ 
 

 
.container { 
 
    display: flex; 
 
    flex-direction: rows; 
 
    flex-wrap: wrap; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
[class*="col-"] { 
 
    padding: 15px; 
 
    border: 1px solid red; 
 
    text-align: center; 
 
} 
 
.clear { 
 
    clear: both 
 
} 
 
html { 
 
    font-family: Verdana, Geneva, sans-serif; 
 
} 
 
p { 
 
    font-size: 11px 
 
} 
 
a, 
 
a:hover, 
 
a:active, 
 
a:visited { 
 
    color: #ffffff; 
 
} 
 
a.textlink, 
 
a.textlink:hover, 
 
a.textlink:active, 
 
a.textlink:visited { 
 
    color: #000000; 
 
} 
 
/* For mobile phones: */ 
 

 
[class*="col-"] { 
 
    width: 100%; 
 
} 
 
@media only screen and (min-width: 600px) { 
 
    /* For tablets: */ 
 
    .col-m-1 { 
 
    width: 50%; 
 
    } 
 
} 
 
@media only screen and (min-width: 768px) { 
 
    /* For desktop: */ 
 
    .col-1 { 
 
    width: 20%; 
 
    } 
 
} 
 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
}

<div class="container"> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /> 
 
    <br />Some text 
 
    <br />And more text 
 
    <br />And more text</div> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /> 
 
    <br />Some text 
 
    <br />And more text</div> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /> 
 
    <br />Some text 
 
    <br />And more text</div> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /> 
 
    <br />Some text 
 
    <br />And more text</div> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /> 
 
    <br />Some text 
 
    <br />And more text</div> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /> 
 
    <br />Some text 
 
    <br />And more text 
 
    <br />And more text</div> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /> 
 
    <br />Some text 
 
    <br />And more text</div> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /> 
 
    <br />Some text 
 
    <br />And more text</div> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /> 
 
    <br />Some text 
 
    <br />And more text</div> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /> 
 
    <br />Some text 
 
    <br />And more text</div> 
 
</div>

나는 안부 클래스