css - divを水平に揃えるためのcss配置

Question

私は次のHTMLに取り組んでいます（このフィドルでも）。

<div id="block1" class="Box"  style="width: 15%; height: 67; overflow-n: scroll;">
    block 1
</div><br/>
<TABLE CLASS="BODY" WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0" RULES="NONE"> table 1 </TABLE>
<div id="block2" style="width: 20%; height: 67;top: 0; position: absolute;left: 25%;">
    block 2
</div> <br/> 
<table CLASS="BODY" WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0" RULES="NONE" > table 2</table>
<div id="block3" style="width: 22%; height: 67;top: 0; position: absolute;left: 50%;">
    block 3
</div><br/>
<table CLASS="BODY" WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0" RULES="NONE" > table 3</table>
<div id="block4" style="width: 25%;top: 0;  position: absolute;left: 75%; height: 67; display: inline-block;">
    block 4
</div><br/>
<table CLASS="BODY" WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0" RULES="NONE" > table 4</table>

ブロック 1 ブロック 2 ブロック 3 ブロック 4 という名前の 4 つのブロックが、テーブルの位置を変更せずに水平になるようにします。

これで問題ありません。すべてのブロックが適切な位置にあります。

しかし、他のdivが存在する場合は、これ<div> position </div> をフィドルの上部に貼り付けることができます。ブロック1の位置を指定しないため、ブロック1のみが自動的に次の行に移動します。他のブロック2、3、4も同じになるようにします行、div が存在する場合。CSS プロパティを介してこれを実現できますか?

注:各 Div は 4 つの異なる機能の下にあります

Answer 1

これは、ブロック 2 ～ 4 が絶対配置されているためです。これにより、最初の div を無視して、要素フローから除外されます。

floatまたはを使用display:inline-blockして、「前にある」マークアップを無視せずに div を水平方向に整列させます。または、追加のラッパー div を使用することもできますposition:relative。

Answer 2

http://jsfiddle.net/kgVKw/6/ それはあなたが達成したいことですか? あなたのコードは非常にやり過ぎでした。必要なのは、そうであれば

Answer 3

これは、相対的に配置されたdivでラップするだけのmyFiddleです..