1

以下のフィドルで

http://jsfiddle.net/Qv9uQ/

すべてのブロック1、ブロック2、ブロック3、ブロック4を同じ行に配置する必要があります。テーブルの位置を修正する必要があります。変更しないでください。display：inline-blockで試しました。機能していません。

テーブルの位置を固定してマージンを設定すると、テーブルの位置も変化します。しかし、テーブルを固定する必要があります。

fiddleで実行すると、以下のコードを試すことができます。

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

1 に答える 1

0

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>
于 2012-07-14T04:44:23.030 に答える