HTML/CSS：空白の矩形

Question

私は、横棒を作るためにいくつかの線を並べることができるように、一定のスペース（幅）を占める要素を作る必要があります。私はそれを絶対的な位置で動作させることができますが、私は手動で '左'のバーセグメント（四角形）が正しく配置されるように制御しなければならず、やや面倒です。代わりがありますか？

Answer 1

あなたはこのような何かを行うことができます。

Answer 2

あなたは単にそれらを浮かべることができます。

垂直スタックを仮定すると、すべての内部要素を右に浮動させ、clear: left;を与え、それらを最大要素と等しい固定幅を持つ外部要素に配置できます。

水平の行を仮定すると、浮動するだけで十分です。

<style> 
#container{ 
    float:left; 
    position:relative; 
} 
.rect{ 
    float:left; 
    height: 50px; /* or whatever you want */ 
    position:relative; 
    width: 50px; /* or whatever you want */ 
</style> 

<div id="container"> 
<div class="rect">&nbsp;</div> 
<div class="rect">&nbsp;</div> 
<div class="rect">&nbsp;</div> 
<div class="rect">&nbsp;</div> 
</div> 

これはあなたのコンテナの幅/その他のCSSプロパティに対応する.rectボックスの横一列になるだろう：.rectのdivはあなたのボックスですどこ