如何在三个堆叠的div旁边对齐一个大div？

Question

三个小屁股堆叠在一起，右侧有一个三个小小的高div。我该怎么做呢？ Bootstrap有什么准备好吗？

Answer 1

这应该这样做：

#left, #right {
  float: left;
  font-weight: bold;
  font-family: Calibri, sans-serif;
  font-size: 20px;
}

#left .small {
  display: block;
  width: 200px;
  height: 55px;
  padding: 12px;
  box-sizing: border-box;
}

#right {
  display: block;
  width: 400px;
  height: 165px;
  padding: 20px;
  box-sizing: border-box;
  font-size: 60px;
}

<div id="left">
  <div class="small" style="color: #22B14C; background-color: #ED1C24">Small div</div>
  <div class="small" style="color: #FFAEC9; background-color: #00A2E8">Small div</div>
  <div class="small" style="color: #ED1C24; background-color: #FFAEC9">Small div</div>
</div>
<div id="right" style="color: #0099DB; background-color: #22B14C">Big div</div>

如果您希望宽度为100％，请使用

#right {
    /*    ...    */
    width: calc(100% - 200px);
}

Answer 2

您不需要使用任何框架，您可以使用Flexbox。

执行此操作

.content  {
  display: flex;
}
.left {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.box {
  padding-bottom: 50px;
}
.right {
  flex: 3;
  background: #22B14C;
}
.box:nth-child(1) {background: #ED1C24;}
.box:nth-child(2) {background: #00A2E8;}
.box:nth-child(3) {background: #FFAEC9;}

<div class="content">
  <div class="left">
    <div class="box">Small DIv</div>
    <div class="box">Small DIv</div>
    <div class="box">Small DIv</div>
  </div>
  <div class="right">Big div</div>
</div>