Question

这就是我的网页目前的展示方式：

我想要的是盒子1的高度等于盒子3的高度，如果有更多的文本要添加到盒子1或3等（和盒子2和4相同，在同一时间）。我还希望其长度较短的长度，以便延长，使其与较长边的长度相同，从而导致两侧（绿色框和4个盒子组合）具有相同的高度。

更基本上：方框1,2,3和4都具有相同的高度。如果需要，4个盒子和绿色盒子都向下延伸到相同的高度，这样绿色盒子的高度大约是一个小盒子高度的两倍。

这是我目前的代码：

<div class="container">
  <div class="row">
    <div class="col-xs-6" id="big-box">
      <div class="big-box" style="/*INSERT STYLE EFFECTS HERE*/" id="big-box"> /*INSERT BIG PARAGRAPH HERE*/
      </div>
    </div>
    <div class="col-xs-6">
      <div class="row">
        <div class="col-xs-6">
          <div class="mini-box" id="firstBox">1</div>
        </div>
        <div class="col-xs-6">
          <div class="mini-box" id="secondBox">2</div>
        </div>
        <div class="col-xs-6">
          <div class="mini-box" id="thirdBox">3</div>
        </div>
        <div class="col-xs-6">
          <div class="mini-box" id="fourthBox">4</div>
        </div>
      </div>
    </div>
  </div>
</div>

使用一些基本的CSS来改变文本和背景颜色等的外观。

我尝试过使用Javascript，Bootstrap和CSS属性试图让这成为可能，但到目前为止还没有任何效果。有什么帮助吗？

提前致谢

Answer 1

我个人不喜欢引导类名，但这不是重点。所以我认为你需要改变CSS：

.row {
    position: relative; // set bounds for mini-box absolute.
}
.mini-box {
    position: absolute;
    top: 0px;
    bottom: 0px;
}

Answer 2

我不是引导程序的忠实粉丝所以我有另一种选择， Flexbox的。父母有一个height: 200px;，每个孩子都会对齐，但我无法用row中的第二个孩子修复它。因为height: 95px;

，我用10px margin修正了它

.parent {
  align-items: flex;
  display: flex;
  height: 200px;
}
row {} .child1 {
  background-color: green;
  color: #fff;
  width: 300px;
  margin: 0 10px;
}
.child2 {
  background-color: grey;
  color: #fff;
  margin: 0 10px 10px;
  height: 95px;
}
.child3 {
  background-color: red;
  color: #fff;
  margin: 0 10px;
  height: 95px;
}
.child4 {
  background-color: pink;
  color: #fff;
  margin: 0 10px 10px;
  height: 95px;
}
.child5 {
  background-color: black;
  color: #fff;
  margin: 0 10px;
  height: 95px;
}

<div class="parent">
  <div class="child1">text big</div>
  <div class="row">
    <div class="child2">text 1</div>
    <div class="child3">text 2</div>
  </div>
  <div class="row">
    <div class="child4">text 3</div>
    <div class="child5">text 4</div>
  </div>
</div>

css tricks了解有关flexbox的更多信息

使用Bootstrap将列设置为相等高度。

2 个答案: