ページの全幅の後の2行目のインラインブロックアライメント

Question

最近、私はdisplay：inline-block要素でプレイしていましたが、いつか問題が発生しました。私は、フルサイズのページに異なるサイズの色のブロックを合わせようとしていましたが、すべてがうまくいったのですが、最初の行が終わった瞬間、2行目は私が望むやり方に合わなかった。ですから、例えば今私はこれがあります。

をし、ここでの唯一の問題は、黒ブロックが空白なし、右暗赤色（茶色）ブロックの下にあるべきであるということです。緑のブロックがその位置にあり、赤と黄もあります。

私のhtml：

<div id="container"> 
     <div class="cyanBlock"></div><!-- 
     --><div class="brownBlock"></div><!-- 
     --><div class="orangeBlock"></div><!-- 
     --><div class="blueBlock"></div><!-- 
     --><div class="whiteBlock"></div><!-- 
     --><div class="blackBlock"></div><!-- 
     --><div class="greenBlock"></div><!-- 
     --><div class="redBlock"></div><!-- 
     --><div class="yellowBlock"></div> 
    </div> 

マイCSS：

body { 
    margin: 0px;  
} 

#container { 
    width:100%; 
    position: relative; 
} 

.cyanBlock { 
    width:100%; 
    height:10%; 
    background-color:cyan; 
    display: inline-block; 
} 

.brownBlock { 
    width:35%; 
    height:20%; 
    background-color:brown; 
    vertical-align: top; 
    display:inline-block; 
} 

.orangeBlock { 
    vertical-align: top; 
    width:25%; 
    height:35%; 
    background-color:orange; 
    display: inline-block; 

} 

.blueBlock { 
    vertical-align: top; 
    display: inline-block; 
    width:20%; 
    height:35%; 
    background-color:blue; 
} 

.whiteBlock { 
    vertical-align: top; 
    width:20%; 
    height:90%; 
    background-color:white; 
    position: absolute; 
    display: inline-block; 
} 

.blackBlock { 
    vertical-align: top; 
    width:35%; 
    height:25%; 
    background-color:black; 
    display: inline-block; 

} 

.greenBlock { 
    vertical-align: top; 
    width:45%; 
    height:10%; 
    background-color:green; 
    display: inline-block; 
} 

.redBlock { 
    vertical-align: top; 
    width:50%; 
    height:45%; 
    background-color:red; 
    display: inline-block; 
} 

.yellowBlock { 
    vertical-align: top; 
    width:30%; 
    height:45%; 
    background-color:yellow; 
    display: inline-block; 
} 

Answer 1

あなたが黒の真ん中と茶色に白のブロックを持っているためだ、だから何あなたがしなければならないことは、これを削除しています白いブロック。 htmlコードは次のようになります。

<div id="container"> 
    <div class="cyanBlock"></div><!-- 
    --><div class="brownBlock"></div><!-- 
    --><div class="orangeBlock"></div><!-- 
    --><div class="blueBlock"></div><!-- 
    --><!-- The white block has to disappear (and remove the white block's CSS class 
    --><div class="blackBlock"></div><!-- 
    --><div class="greenBlock"></div><!-- 
    --><div class="redBlock"></div><!-- 
    --><div class="yellowBlock"></div> 
</div>