如何将一个大 div 与三个堆叠的 div 对齐？

Question

三个小div层叠在一起，右边是一个大三小div高div。我该怎么做呢？ Bootstrap有什么准备吗？

Answer 1

您不需要使用任何框架，您可以使用 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>

Answer 2

应该这样做：

#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);
}

如何将一个大 div 与三个堆叠的 div 对齐？

How can I align a big div next to three stacked divs?

css

css-float