Question

我有两个并排的DIV，一个具有静态内容，另一个具有动态内容，我希望静态DIV的高度随着动态DIV的高度的增加而增加。

到目前为止我的代码是：

<div class="row"> 
  <div class="col-sm-2">abc(STATIC CONTENT)</div>
  <div class="col-sm-10"> DYNAMIC CONTENT</div>
</div>

Answer 1

.row {
  display: flex;
  width: 500px;
  background: red;
  padding: 20px;
}
.col-sm-2,
.col-sm-10 {
  flex: 1;
  padding: 5px;
}
.col-sm-2 {
  background: lime;
}
.col-sm-10 {
  background: cyan;
}

<div class="row"> 
  <div class="col-sm-2">abc(STATIC CONTENT)<br/> adding more height <br/> ... and some more</div>
  <div class="col-sm-10"> DYNAMIC CONTENT</div>
</div>

要深入了解主题flexbox，请参阅：http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback

如何制作两个高度相同的HTML DIV？

1 个答案: