html - 所有块都应该水平放置

Question

在下面的小提琴中

http://jsfiddle.net/Qv9uQ/

我希望所有块 1、块 2、块 3、块 4 在同一行。我的表位置必须固定。它不应该改变我尝试使用 display:inline-block。它不工作。

如果我保持表格位置固定并设置边距表格位置也在改变..但我的表格必须固定。

您可以通过在小提琴中运行来尝试以下代码：

<div class="Box"  style="width: 15%; height: 67; overflow-n: scroll; display: inline-block;scrollbar-arrow-color: blue;
    scrollbar-face-color: #e7e7e7; scrollbar-3dlight-color: #a0a0a0; scrollbar-darkshadow-color: #888888">
        block 1
</div><br/>

<TABLE CLASS="BODY" WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0" RULES="NONE"> table 1 </TABLE>

    <div style="width: 20%; height: 67;display: inline-block;
        scrollbar-arrow-color: blue; scrollbar-face-color: #e7e7e7;
        scrollbar-3dlight-color: #a0a0a0; scrollbar-darkshadow-color: #888888">
       block 2
</div> <br/> 

    <table CLASS="BODY" WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0" RULES="NONE" > table 2</table>

    <div style="width: 22%; height: 67;  display: inline-block;
         scrollbar-arrow-color: blue; scrollbar-face-color: #e7e7e7;
        scrollbar-3dlight-color: #a0a0a0; scrollbar-darkshadow-color: #888888">
        block 3
    </div><br/>

        <table CLASS="BODY" WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0" RULES="NONE" > table 3</table>

    <div style="width: 25%; height: 67; display: inline-block;
         scrollbar-arrow-color: blue; scrollbar-face-color: #e7e7e7;
        scrollbar-3dlight-color: #a0a0a0; scrollbar-darkshadow-color: #888888">
        block 4
    </div><br/>​

 <table CLASS="BODY" WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0" RULES="NONE" > table 4</table>

Answer 1

由于您说您不能更改 HTML 的顺序，因此您需要在<divs>. 给每个<div>一个id和设置left每个和top: 0;

演示：http: //jsfiddle.net/ThinkingStiff/sZQNc/

CSS：

<style>
    div {
        top: 0; 
        position: absolute; 
    }
    
    #block1 {
        left: 0;   
    }
    
    ​#block2 {
        left: 25%;    
    }
    
    #block3 {
        left: 50%;    
    }
    
    ​#block4 {
        left: 75%    
    }​
</style>