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

Question

更新基于意见

我试图通过使那些宽度的30％，集装箱创造一个全尺寸的页面上的div部分。在这些内部，我打算在其中对齐2或3个div大小。我有一排大箱子，占据了高度的100％，宽度的一部分，然后是一个大小只有一半的箱子。我希望所有这些半尺寸的盒子与大盒子放在同一行，以创建一个不错的堆叠。我认为这是一个大小与位置的问题，但我没有太多运气，而且我正在过度考虑这个问题。

小提琴：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

Answer 2

我会建议使用位置，然后使用左，右，上，下对齐的div。选择一个有意义的位置设置来移动div，然后摆动它的位置，直到它们按照您的意愿排列。

由于paulie_D在评论中表示多次不使用ID，它们应该是唯一的。你想要使用一个类在多个对象上应用相同的样式。我的一般规则是类用于应用样式，ID用于标识页面上的特定对象。