如何在容器內對齊混合大小的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用於標識頁面上的特定對象。