更新

Question

我在这个设计中有一点非传统的DIV，如下所示。我可以使用高度并执行它但我希望它动态更改：例如，如果DIV具有更多内容并且右侧的一个块中的高度发生变化，则左侧DIV也会自动调整其高度。我想知道flex是否有帮助。以下是它应该如何变为：

到目前为止我有这个HTML：

<div class="container">
  <div class="row row-eq-height">
      <div class="col-sm-8 col-8">
        <div class="black">
          <p>Bar Graph or Line Graph</p>
        </div>
      </div>
      <div class="col-sm-4 col-4">
        <div class="red">
          <p>numbers</p>
        </div>
        <div class="purple">
          <p>numbers</p>
        </div>
        <div class="green">
          <p>numbers</p>
        </div>
        <div class="blue">
          <p>numbers</p>
        </div>
      </div>
  </div>
</div>

和CSS：

p { color: #fff; }
.black { background-color: black; }
.green { background-color: green; }
.red { background-color: red; }
.blue { background-color: blue; }
.purple { background-color: purple; }

JSFiddle Demo

Answer 1

您正在使用Bootstrap 4，对吧？ Bootstrap 4默认实现了flexbox，你可以使用纯类Bootstrap 4提供：

<div class="container">
  <div class="row">
      <div class="col-sm-8 col-8 black">
          <p>Bar Graph or Line Graph</p>
      </div>
      <div class="col-sm-4 col-4 d-flex align-content-around flex-wrap">
        <div class="red">
          <p>numbers and more and so on and on and on</p>
        </div>
        <div class="purple">
          <p>numbers</p>
        </div>
        <div class="green">
          <p>numbers</p>
        </div>
        <div class="blue">
          <p class="mb-0">numbers</p>
        </div>
      </div>
  </div>
</div>

JS小提琴链接：https://jsfiddle.net/ydjds2ko/

详细说明：

您不需要课程row-eq-height（它不在Bootstrap4中无论如何）因为相同的高度是默认的。
类col-sm-8的第一个div具有正确的高度，它在黑色背景下是不可见的，因为内部div具有它自己的高度。我刚删除了内部div并将类black添加到col。如果你需要内部div，给它（Bootstrap4）类h-100，它调整父元素的高度。
使用类col-sm-4的div获得类d-flex align-content-around flex-wrap。他们正在调整内容div。 Bootstrap doku：https://getbootstrap.com/docs/4.0/utilities/flex/#align-content
- 使用w-100
因为<p>在底部添加了一个边距，所以你的蓝色div在两端没有与黑色div齐平。我加了上课＆＃34; mb-0＆＃34;，它将保证金底部设置为＆＃34; 0＆＃34;所以你可以看到它有效。

这应该工作，右边或左边的div是具有更大高度属性的那个。

编辑：添加了内容对齐的类。

Answer 2

您可以使用flexbox。

更新

另一种方式：

https://jsfiddle.net/persianturtle/ar0m0p3a/5/

.row-eq-height > [class^=col] {
  display: flex;
  flex-direction: column;
}

.row-eq-height > [class^=col]:last-of-type div {
  margin: 10px;
}

.row-eq-height > [class^=col]:last-of-type div:first-of-type {
  margin-top: 0;
}

.row-eq-height > [class^=col]:last-of-type div:last-of-type {
  margin-bottom: 0;
}

.row-eq-height > [class^=col]:first-of-type .black {
  flex-grow: 1;
}

更新

更具体的课程更好的方法：

https://jsfiddle.net/persianturtle/ar0m0p3a/3/

.row-eq-height > [class^=col]:first-of-type {
  display: flex;
}

.row-eq-height > [class^=col]:first-of-type .black {
  flex-grow: 1;
}

.blue p {
  margin: 0;
}

原创方式：

https://jsfiddle.net/persianturtle/ar0m0p3a/1/

[class^=col] {
  display: flex;
  flex-direction: column;
}

[class^=col] div {
  flex-grow: 1
}

Answer 3

这是一个非常简单的仅Bootstrap 方法。你不需要任何额外的CSS。

https://www.codeply.com/go/J3BHCFT7lF

<div class="container">
  <div class="row">
      <div class="col-8">
        <div class="black h-100">
          <p>Bar Graph or Line Graph</p>
        </div>
      </div>
      <div class="col-4 d-flex flex-column">
        <div class="red mb-2">
          <p>numbers</p>
        </div>
        <div class="purple mb-2">
          <p>numbers with more lines of content that wrap to the next line</p>
        </div>
        <div class="green mb-2">
          <p>numbers</p>
        </div>
        <div class="blue">
          <p>numbers</p>
        </div>
      </div>
  </div>
</div>

这使用Bootstrap 4 utility classes来制作正确的色谱柱填充高度。

Bootstrap 4中的列高度相等

3 个答案:

更新

更新