レスポンスグリッドカラムを同じ高さにする

Question

レスポンシブグリッドシステムをresponsivegridsystem.comから使用しており、問題が発生しています。私はページ上に複数の2列のグリッドを作成していますが、隣にはこれらの列が同じ高さではありません。列がお互いに一致するようにする方法はありますか？たとえば、より小さなものが厳密な高さを設定することなく長いものの高さに合うようにしますか？ありがとう！

/* SECTIONS */ 
 

 
.section { 
 
    clear: both; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 

 
/* COLUMN SETUP */ 
 

 
.col { 
 
    display: block; 
 
    float: left; 
 
    margin: 1% 0 1% 1.6%; 
 
} 
 

 
.col:first-child { 
 
    margin-left: 0; 
 
} 
 

 

 
/* GROUPING */ 
 

 
.group:before, 
 
.group:after { 
 
    content: ""; 
 
    display: table; 
 
} 
 

 
.group:after { 
 
    clear: both; 
 
} 
 

 
.group { 
 
    zoom: 1; 
 
    /* For IE 6/7 */ 
 
} 
 

 

 
/* GRID OF TWO */ 
 

 
.span_2_of_2 { 
 
    width: 100%; 
 
} 
 

 
.span_1_of_2 { 
 
    width: 49.2%; 
 
} 
 

 

 
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 
 

 
@media only screen and (max-width: 480px) { 
 
    .col { 
 
    margin: 1% 0 1% 0%; 
 
    } 
 
} 
 

 
@media only screen and (max-width: 480px) { 
 
    .span_2_of_2, 
 
    .span_1_of_2 { 
 
    width: 100%; 
 
    } 
 
}

<div class="section group"> 
 
    <div class="col span_1_of_2"> 
 
    This is column 1 
 
    </div> 
 
    <div class="col span_1_of_2"> 
 
    This is column 2 
 
    </div> 
 
</div>

Answer 1

パトリックが正しいです。あなたはこれを達成するためにフレックスボックスを使う必要があります。あなたのコードを使って、本当に簡単なフレックスボックスを紹介します。

/* SECTIONS */ 
 
.section { 
 
display: flex; 
 
clear: both; 
 
padding: 0px; 
 
margin: 0px; 
 
} 
 

 
.bg1 { 
 
    background-color: blue; 
 
} 
 

 
.bg2 { 
 
    background-color: yellow; 
 
} 
 

 
/* COLUMN SETUP */ 
 
.col { 
 
display: block; 
 
float:left; 
 
margin: 1% 0 1% 1.6%; 
 
} 
 
.col:first-child { margin-left: 0; } 
 

 
/* GROUPING */ 
 
.group:before, 
 
.group:after { content:""; display:table; } 
 
.group:after { clear:both;} 
 
.group { zoom:1; /* For IE 6/7 */ } 
 
/* GRID OF TWO */ 
 
.span_2_of_2 { 
 
    width: 100%; 
 
} 
 
.span_1_of_2 { 
 
width: 49.2%; 
 
} 
 

 
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 
 

 
@media only screen and (max-width: 480px) { 
 
.col { 
 
    margin: 1% 0 1% 0%; 
 
    } 
 
} 
 

 
@media only screen and (max-width: 480px) { 
 
.span_2_of_2, .span_1_of_2 { width: 100%; } 
 
}

<div class="section group"> 
 
<div class="col span_1_of_2 bg1"> 
 
    This is column 1 
 
</div> 
 
<div class="col span_1_of_2 bg2"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet odio scelerisque, sollicitudin metus sit amet, aliquam libero. Vestibulum convallis sapien lacus, 
 
</div> 
 
</div>

Answer 2

あなたがちょうどCSSと同じ高さを持っているあなたの列を取得できるようにするつもりはないフレックスボックスを使用している場合を除き...過去に私はこの問題を解決しましたjavascriptを使用し、クラス.match-heightを持つ各dom要素の行に沿ってユーティリティを作成することで、親を見て最も高い子を見つけ、その高さを取得して最初の子孫に適用します。

私は共有することができ、コードを持っていないが、同様のことをやって、プラグインがあるように見えるので、私は私の仕事用PCに午前： http://brm.io/jquery-match-height/

をまた、あなたがするあなたの質問のタイトルを変更する必要がありますが： 応答グリッド列の高さを同じにする

現在のタイトルは混乱する可能性があるため、