it-swarm.com.de

Dehnen Sie die untergeordnete Div-Höhe, um das übergeordnete Element mit dynamischer Höhe zu füllen

Wie in der folgenden Geige zu sehen ist, habe ich zwei divs, die in einem übergeordneten div enthalten sind und das große div enthalten. Mein Ziel ist es, diese Kinder divs in der Höhe gleich zu machen.

http://fiddle.jshell.net/y9bM4/

76
Khaled

Die Lösung ist, display: table-cell zu verwenden, um diese Elemente inline zu bringen, anstatt display: inline-block oder float: left zu verwenden.

div#container {
  padding: 20px;
  background: #F1F1F1
}
.content {
  width: 150px;
  background: #ddd;
  padding: 10px;
  display: table-cell;
  vertical-align: top;
}
.text {
  font-family: 12px Tahoma, Geneva, sans-serif;
  color: #555;
}
<div id="container">
  <div class="content">
    <h1>Title 1</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.
      <br>Sample Text. Sample Text. Sample Text.
      <br>Sample Text.
      <br>
    </div>
  </div>
  <div class="content">
    <h1>Title 2</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.</div>
  </div>
</div>

Arbeiten Fiddle

43
Mr_Green

Verwenden Sie display: flex, um Ihre divs zu strecken:

div#container {
    padding:20px;
    background:#F1F1F1;
    display: flex;
}

.content {
    width:150px;
    background:#ddd;
    padding:10px;
    margin-left: 10px;
}

JSFIDDLE

48
Trong Lam Phan

Fügen Sie das folgende CSS hinzu:

Für das übergeordnete div:

style="display: flex;"

Für Kind div:

style="align-items: stretch;"
11
Ayan

https://www.youtube.com/watch?v=jV8B24rSN5o

a think Sie können die Anzeige als Raster verwenden

parent { display: grid };

}

0
Gelo K