子 div 自动调整到其父级

debugcn 发表于 Dev

杰克斯

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

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

<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>

将高度指定为特定值对我来说是不可能的。因为内容可能会有所不同

短途旅行

最初我打算用与@Mihai-t 相同的解决方案来回答，但我意识到一个css 网格解决方案，在我看来，更优雅和合适：

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

<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>

不幸的是css-grid不是很以及支持的flex是，但像flex你应该只服务于移动版的浏览器不支持。

此解决方案允许您根据需要添加任意数量的布局并以任何顺序放置对象，这正是附加媒体查询所演示的。这是您无法使用flex.

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。