Question

在下面的小提琴

我想要所有块1，块2，块3，块4在同一行。我的表位置必须修复。它不应该改变我尝试使用display：inline-block.it不起作用。

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

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

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

所有块都应该水平放置

1 个答案:

CSS：