html - 如何在容器内对齐混合大小的 div？

Question

根据评论更新

我试图通过制作占宽度 30% 的容器在全尺寸页面上创建 div 部分。其中，我计划在其中对齐 2 或 3 个 div 大小。我有一排有一个大盒子，它占据了 100% 的高度和一部分宽度，然后是一个刚好一半大小的盒子。我想让所有这些半尺寸的盒子与较大的盒子在同一行，以创建一个漂亮的堆叠。我假设这是一个大小与位置的问题，但我没有太多运气，而且我过度思考了这个问题。

fiddle :https://jsfiddle.net/as9hud4k/10/

HTML:

<div class="content_section">
    <div class="content_thirdsize">
        <div class="content_thirdsize_inner_row">
            <div class="content_thirdsize_inner_large"> </div>
            <div class="content_thirdsize_inner_small"> </div>
            <div class="content_thirdsize_inner_small"> </div>
            <div class="content_thirdsize_inner_small"> </div>
            <div class="content_thirdsize_inner_small"> </div>
            <div class="content_thirdsize_inner_small"> </div>
            <div class="content_thirdsize_inner_small"> </div>
            <div class="content_thirdsize_inner_small"> </div>

            <div class="content_thirdsize_inner_small"> </div>
        </div>
    </div>
</div>

CSS:

.content_thirdsize
{
    width: 500px;
    height: 500px;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    background-color: rgba(83, 35, 128, 0.2);
}

.content_thirdsize_inner_row
{
    width: 500px;
    height: 105px;
    display: inline-block;
    background-color: rgba(83, 35, 128, 0.2);
    margin: 2px;
}

.content_thirdsize_inner_large
{
    position: relative;
    width: 100px;
    height: 100px;
    display: inline-block;
    background-color: rgba(83, 35, 128, 0.2);
    border: 1px dashed #000;
    vertical-align: left;
}

.content_thirdsize_inner_small
{
    position: relative;
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: rgba(83, 35, 128, 0.2);
    border: 1px dashed #000;
    vertical-align: right;
}

Answer 1

我怀疑数学可能需要调整以考虑间距，但 flexbox 可以在这里做很多工作。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
section {
  display: flex;
  margin: auto;
}
.content-wrap {
  display: flex;
  flex-wrap: nowrap;
  padding: 5px;
  background: orange;
}
.small-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 350px;
}
.large,
.small {
  width: 100px;
  height: 100px;
  background: rebeccapurple;
  border: 2px dotted white;
}
.small {
  width: 50px;
  height: 50px;
}

<section>
  <div class="content-wrap">
    <div class="large"></div>
    <div class="small-wrap">
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div </div>
    </div>
</section>

Codepen Demo