応答性の高いレイアウトを維持しながら、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>

Iは、別のクラスのCOL-M-1なしで、タブレットベースのレイアウトが機能しないであろうことを見出しました。 （私は特にレスポンシブなレイアウトに慣れていませんでしたので、W3Cチュートリアルに従っていました。）

Answer 1

あなたはフレックスで適切な道を歩いていました。 ：

@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>

私はコルクラス