子div自动调整其父级

Question

我有一个父div。在它内部，它们是左侧的3个div，右侧的另外两个。随着右边div的内容增加，我需要增加左边div的高度

＆＃13;

＆＃13;

.jumbotron-r {
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  background-color: #333;
  border-radius: 0.3rem;
  height: auto;
}

@media (min-width: 576px) {
  .jumbotron-r {
    padding: 7.5rem 2rem;
  }
}

.jumbotron-l {
  padding: 2rem 1rem;
  margin-bottom: 1rem;
  background-color: #333;
  border-radius: 0.3rem;
}

@media (min-width: 576px) {
  .jumbotron-l {
    padding: 4rem 2rem;
  }
}

.jumbotron-fluid-l {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}

.letter-color {
  color: #fff;
}

.break {
  background-color: #fff;
  height: 1px;
}

.jumbotron-nav {
  margin-bottom: 1rem;
  border-radius: 0.3rem;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-6 col-md-6 col-lg-5 ">
    <div class="jumbotron-r">
      <h1 class="letter-color">Left Div</h1>
      <p class="letter-color">Left Div content</p>

    </div>
  </div>
  <div class="col-sm-6 col-md-6 col-lg-7 ">
    <div class="jumbotron-l">
      <p class="letter-color">Right Div1 content</p>

    </div>
  </div>

  <div class="col-sm-6 col-md-6 col-lg-7 ">
    <div class="jumbotron-l">
      <p class="letter-color">Right Div2 content</p>
      <p><a href="#" target="_blank" class="btn btn-success btn-lg">Button</a></p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我无法指定特定值的高度。因为内容可能会有所不同

Answer 1

您可以在行上使用display:flex制作相同高度的列。因此，您需要将两列放在同一行中。

所以只需要2个col-md-6（不知道你为什么要添加另一个）并在行上超过768px时使用display flex

请参阅下面的代码段或jsFiddle

＆＃13;

＆＃13;

.row-eq-height .col-sm-6:first-child .jumbotron-r {
  height: 100%;
}

.jumbotron-r {
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  background-color: #333;
  border-radius: 0.3rem;
  height: auto;
}

@media (min-width: 576px) {
  .jumbotron-r {
    padding: 7.5rem 2rem;
  }
}

.jumbotron-l {
  padding: 2rem 1rem;
  margin-bottom: 1rem;
  background-color: #333;
  border-radius: 0.3rem;
}

.jumbotron-l:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .row-eq-height {
    display: flex;
  }
}

@media (min-width: 576px) {
  .jumbotron-l {
    padding: 4rem 2rem;
  }
}

.jumbotron-fluid-l {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}

.letter-color {
  color: #fff;
}

.break {
  background-color: #fff;
  height: 1px;
}

.jumbotron-nav {
  margin-bottom: 1rem;
  border-radius: 0.3rem;
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row row-eq-height">
  <div class="col-sm-6 col-md-6 col-lg-5 ">
    <div class="jumbotron-r">
      <h1 class="letter-color">Left Div</h1>
      <p class="letter-color">Left Div content</p>

    </div>
  </div>
  <div class="col-sm-6 col-md-6 col-lg-7 ">





    <div class="jumbotron-l">
      <p class="letter-color">Right Div1 content</p>

    </div>





    <div class="jumbotron-l">
      <p class="letter-color">Right Div2 content</p>
      <p><a href="#" target="_blank" class="btn btn-success btn-lg">Button</a></p>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

最初我打算用与@ Mihai-t相同的解决方案回答，但我意识到css grid解决方案在我看来更优雅和恰当：

＆＃13;

＆＃13;

#a {
  grid-area: a;
}

#b {
  grid-area: b;
}

#c {
  grid-area: c;
}

#container {
  display: grid;
  grid-gap: .5rem;
  grid-template-columns: auto auto;
  grid-template-areas: 
    "a" 
    "b" 
    "c";
}

@media (min-width: 700px) {
  #container {
    grid-template-areas: 
      "a b" 
      "a c";
  }
}

@media (min-width: 1200px) {
  #container {
    grid-template-areas: 
      "b a c";
  }
}

.item {
  padding: 1rem;
  background-color: #333;
  border-radius: 0.3rem;
  color: #fff;
  font-weight: 500;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
}

＆＃13;

<div id="container">
  <div id="a" class="item">
    <h1>Left</h1>
  </div>
  <div id="b" class="item">
    <p>Right Top</p>
  </div>
  <div id="c" class="item">
    <p>Right bottom</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

不幸的是css-grid并不像supported那样flex is，但与flex一样，您应该只将移动版本投放到不受支持的浏览器。

此解决方案允许您根据需要添加任意数量的布局，并按任意顺序放置对象，这是附加媒体查询演示的内容。使用flex无法实现哪些目标。

Answer 3

你可以使用jquery 看看这个插件 https://github.com/liabru/jquery-match-height

你给你的div同一个班级，这将与他们的身高相匹配

<script>
      $(document).load(function() { 

        $('.same_height').matchHeight({ byRow:true });

      });
      </script>