Question

我正在使用以下HTML (also in this fiddle)。

<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>

我希望名为block 1 block 2 block 3 block 4的四个块水平放置而不改变表位置。

现在很好。所有的街区都处于适当的位置。

但是如果存在其他一些div就像可以将这个<div> position </div>粘贴在小提琴的顶部。只有块1自动进入下一行，因为我给了块1的定位。我想要其他块2，如果存在一些div，那么3,4也会出现在同一行。我们可以通过任何CSS属性来实现这一点吗？

注意：每个Div都有4种不同的功能

Answer 1

这是因为你有block2 - 4绝对定位。这将它们从元素流中取出，忽略了开头的div。

使用float或display:inline-block水平对齐div而不忽略“在它们前面”的任何标记。或者，您可以使用具有position:relative的其他包装div。

Answer 2

http://jsfiddle.net/kgVKw/6/ 那是你想要实现的吗？你的代码非常过分，你需要的只是如果是这样

Answer 3

这里的myFiddle只是用div定位相对..

css定位以水平对齐div

3 个答案: