将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;
}

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>

Answer 2

尝试给你想要调整一个唯一类或id的div，然后在CSS中给它高度100％或自动。