我在这个设计中有一点非传统的DIV,如下所示.我可以使用高度并执行它但我希望它动态更改：
例如,如果DIV具有更多内容并且右侧的一个块中的高度发生变化,则左侧DIV也会自动调整其高度.我想知道flex是否有帮助.以下是它应该如何变为：
例如,如果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; }
解决方法
您可以使用
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
}
