it-swarm.dev

قم بتمديد ارتفاع div للطرف لملء الوالدين الذي يتميز بارتفاع ديناميكي

كما يمكن رؤيته في الكمان التالي ، لديّ divs ، موجودان في أحد الوالدين div الذي امتد ليحتوي على div الكبير ، هدفي هو جعل هؤلاء الأطفال divs متساوين في الارتفاع.

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

81
Khaled

الحل هو استخدام display: table-cell لجعل هذه العناصر مضمّنة بدلاً من استخدام display: inline-block أو float: left.

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>

العمل Fiddle

43
Mr_Green

استخدم display: flex لتمديد divs:

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

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

JSFIDDLE

48
Trong Lam Phan

أضف CSS التالي:

بالنسبة إلى الوالد div:

style="display: flex;"

بالنسبة للطفل div:

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

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

أعتقد أنه يمكنك استخدام العرض كشبكة

parent { display: grid };

}

0
Gelo K