Wie zwei Subdivis die gleiche Höhe haben wie ich

Question

Ich muss zwei .tinted-container s die gleiche Höhe wie jedes andere (mit CSS, wenn möglich) aber jeder ist unter einer Rasterspalte.

• Ich kann die Rasterspalten tönen, weil sie padding verwenden, um die Rinnen zu schaffen, und ich würde keinen Leerraum zwischen den getönten Behälter haben, wenn ich den Hintergrund tönen.
• Es ist ein% -Basis Gitter so einen Spielraum zu den beiden Spalten Zugabe nimmt die Breite bis über 100%.

<div class="grid-row"> 
 
     <div class="grid-column-half"> 
 
     <div class="tinted-container"> 
 
      <p>Taller</p> 
 
      <p>column</p> 
 
      <p>on</p> 
 
      <p>left</p> 
 
     </div> 
 
     </div> 
 

 
     <div class="grid-column-half"> 
 
     <div class="tinted-container"> 
 
      <p>This container should be the same height as the other one.</p> 
 
     </div> 
 
     </div> 
 
    </div>

Wie kann ich die Behälter die gleiche Höhe?

Answer 1

Flexbox kann das tun:

* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.grid-row { 
 
    display: flex; 
 
} 
 
.grid-column-half { 
 
    border: 1px solid grey; 
 
    width: 50%; 
 
    padding: 10px 
 
} 
 
.tinted-container { 
 
    height: 100%; 
 
    background: pink; 
 
}

<div class="grid-row"> 
 
    <div class="grid-column-half"> 
 
    <div class="tinted-container"> 
 
     <p>Taller</p> 
 
     <p>column</p> 
 
     <p>on</p> 
 
     <p>left</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="grid-column-half"> 
 
    <div class="tinted-container"> 
 
     <p>This container should be the same height as the other one.</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Sie müssen Höhen der div-Elemente setzen sie auf die gleiche Größe zu erhalten.

Der Grund, warum Sie dies tun müssen, ist, weil die divs nicht alle als eine bestimmte Höhe oder Breite festgelegt sind, hängt davon ab, was in ihnen enthalten ist und in was sie enthalten sind. Mit einem einfachen Beispiel einfach Wenn Sie es auf eine statische Höhe von 200 px setzen und einen Rahmen setzen, können Sie sehen, dass die divs dieselbe Höhe haben. Ohne eine Höhe zu deklarieren, wären beide Divs unterschiedlich hoch und du könntest damit auf der Geige spielen.

diese Funktion zu sehen, hier die Geige Besuche: https://jsfiddle.net/john_h/rnnjx28m/

Sie diese CSS hinzufügen, können die Höhen auf Ihrer Klasse zu setzen:

.tinted-container { 
    height: 200px; 
    border: 1px solid black; 
} 

.grid-column-half { 
    float: left; 
    display: inline-block; 
} 

Und Ihre html gleich bleiben können:

<div class="grid-row"> 
     <div class="grid-column-half"> 
     <div class="tinted-container"> 
      <p>Taller</p> 
      <p>column</p> 
      <p>on</p> 
      <p>left</p> 
     </div> 
     </div> 

     <div class="grid-column-half"> 
     <div class="tinted-container"> 
      <p>This container should be the same height as the other one.</p> 
     </div> 
     </div> 
    </div> 

Sie müssen mit Ihrem Abstand spielen beabsichtigten Blick zu bekommen!