Erstellen von reaktiven Rasterspalten haben die gleiche Höhe

Question

Ich benutze das responsive Grid-System von, nun, responsivegridsystem.com und stoße auf ein Problem. Ich mache mehrere 2 Spaltenraster auf einer Seite (eine unter der anderen), aber nebeneinander haben diese Spalten nicht die gleiche Höhe, die ich will. Gibt es eine Möglichkeit, die Säulen so aufeinander abzustimmen, dass zum Beispiel die kleinere die Höhe der längeren erreicht, ohne dass strenge Höhen eingestellt werden müssen? Vielen Dank!

/* 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

Patrick hat Recht. Sie müssen Flex-Box verwenden, um dies zu erreichen. Hier ist ein wirklich einfacher Ausschnitt der Flex-Box mit Ihrem Code.

/* 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

Wenn Sie Flex-Box verwenden Sie gehen zu können, nicht Ihre Spalten erhalten die gleiche Höhe mit nur CSS haben ... in der Vergangenheit habe ich dieses Problem gelöst haben Verwenden Sie Javascript und indem Sie ein Dienstprogramm nach den Richtlinien für jedes dom-Element mit der Klasse .match-height erstellen, suchen Sie nach dem übergeordneten Element und suchen Sie das höchste untergeordnete Element, ermitteln Sie dessen Höhe und wenden Sie es auf die ersten untergeordneten Elemente an.

ich auf meinem Arbeits-PC bin, so habe ich nicht Code, den ich teilen kann, aber es sieht aus wie es gibt Plugins ähnliche Dinge zu tun: http://brm.io/jquery-match-height/

Auch sollten Sie den Titel Ihrer Frage ändern zu sein: Die Anzahl der reaktiven Rasterspalten ist gleich hoch.

Der aktuelle Titel könnte verwirrend sein.