更新基於意見如何在容器內對齊混合大小的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;
}
您不能重複使用頁面上的ID,你需要這些類來代替。 –
另外,這樣看起來應該是什麼樣子的圖像會很有用,因爲我沒有從描述中理解它。 –
對不起,這...這是我希望實現的 http://imgur.com/gallery/ysQECl1 此外,我會改變這些類,看看它是否有幫助。 –