将div高度更改为2个div

Question

我使用Twitter Bootstrap，但找不到这个问题的答案。我想改变一个div的高度来适应它旁边的两个div的高度。我不知道这是否是个好解释，所以我将尝试通过图片来说明我的问题。如何从这个： 转换成这样： HTML:

<div class ="col-md-4 main-card-wrapper">
 <div class="main-card">1</div>
</div>
<div class ="col-md-4 main-card-wrapper">
 <div class="main-card">2</div>
</div>
<div class ="col-md-4 main-card-wrapper">
 <div class="main-card">3</div>
</div>
<div class ="col-md-12 main-wrapper">
 <div class ="col-md-4 main-card-wrapper">
  <div class="main-card">4</div>
 </div>
<div class ="col-md-8 main-wrapper">
 <div class ="col-md-6 main-card-wrapper">
  <div class="main-card">5</div>
 </div>
 <div class ="col-md-6 main-card-wrapper">
  <div class="main-card">6</div>
 </div>
 <div class ="col-md-12 main-card-wrapper">
  <div class="main-card">7</div>
 </div>
</div>
</div>

CSS：

.main-card-wrapper {
    padding-left: 0.1em !important;
    padding-right: 0.1em !important;
}
.main-wrapper {
    padding-left: 0em !important;
    padding-right: 0em !important;
}
.main-card {
    display: inline-block;
    padding: 2em;
    width: 100%;
    margin: 0.1em;
    color: #ddffdd;
    background-color: #879eff;
    text-align: center;
}
.main-card:hover {
    color: #f4f4f4;
    background-color: #6185ff;
}

- Remigiusz

---

不要试图使用hack方法，你应该考虑使用Flexbox。这里有一个关于Flexbox的指南，可以在css-tricks上找到。https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - Chris Yongchu

Answer 1

如果您将一个网格嵌套在另一个网格中，当您添加内容时，编号4将能够获得其自己列的完整高度。如果您也为它们添加一些固定高度，它也会起作用。

.1, .2 , .3, .5, .6, .7 {
  height: 100px;
}
.4 { 
  height: 200px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-md-4 1">1</div> 
    <div class="col-md-4 2">2</div>
    <div class="col-md-4 3">3</div>
  </div>
  <div class="row">
    <div class="col-md-4 4">4</div>
    <div class="col-md-8 row">
      <div class="col-md-6 5">5</div>    
      <div class="col-md-6 6">6</div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12 7">7</div>
  </div>
 </div>

- wscourge

Answer 2

尝试给你想要调整大小的 div 元素添加一个唯一的类或 ID，然后在 CSS 中将其高度设置为 100% 或自动。

- weinde