2015-07-03 55 views
0

更新基於意見如何在容器內對齊混合大小的div?

我試圖通過使那些寬度的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; 
} 
+1

您不能重複使用頁面上的ID,你需要這些類來代替。 –

+2

另外,這樣看起來應該是什麼樣子的圖像會很有用,因爲我沒有從描述中理解它。 –

+0

對不起,這...這是我希望實現的 http://imgur.com/gallery/ysQECl1 此外,我會改變這些類,看看它是否有幫助。 –

回答

0

我懷疑數學可能需要調整以考慮間距,但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

+0

優秀!非常感謝您對此的幫助。我將使用該代碼作爲基礎。 –

0

我會建議使用位置,然後使用左,右,上,下對齊的div。選擇一個有意義的位置設置來移動div,然後擺動它的位置,直到它們按照您的意願排列。

由於paulie_D在評論中表示多次不使用ID,它們應該是唯一的。你想要使用一個類在多個對象上應用相同的樣式。我的一般規則是類用於應用樣式,ID用於標識頁面上的特定對象。

+0

感謝您的提示。我會用這個想法重新寫它。 –

+0

很高興我能幫忙;在我看來,類與ID和頁面上的東西是CSS和HTML中最棘手的兩個部分。 – Nickknack

+0

同意。造型可能會變得棘手,尤其是當您嘗試堆疊像我這樣的元素時。頁面的總體佈局很好,但是那些內部部分正在殺死我。 –