0

ページの上部に沿って水平に移動する小さな div ボックスのグループがあります。既存の大きな div 内にスクロール可能として表示したいこれらのボックスが最大 50 個ある可能性があります。メインの「FloatMain」divをoverflow:scrollに設定しましたが、これが答えになると思いますが、小さなdivはメインのdivを流し続けます。ここにあるすべての解決策を見てきましたが、特定の問題で私を助けるものは何もないようです.何か助けてください?

  <div id="FloatMain">

  <div title="Driver Details" id="i1001" class="divd" style="left:100px">i1001<br>Paul Stott</div>
  <div title="Driver Details" id="i1002" class="divd" style="left:155px">i1002<br>Simon Latcham</div>
  <div title="Driver Details" id="i1003" class="divd" style="left:210px">i1003<br>Phil Murphy</div>
  <div title="Driver Details" id="i1004" class="divd" style="left:265px">i1004<br>Lee Taylor </div>
  <div title="Driver Details" id="i1005" class="divd" style="left:320px">i1005<br>Martin Macklin</div>
  <div title="Driver Details" id="i1006" class="divd" style="left:375px">i1006<br></div>
  etc ... more of these .....

  </div>

スタイルの詳細 

.divd {
position:fixed ;
width: 50px;
height: 50px;   
top: 50px ;
left: 50px ; 
border: 1px solid black;
background-color:#999; 
border-radius:5px;  
z-index:200;
}

#FloatMain {
position:fixed ; 
width: 300px;
height: 300px;
top: 40px ; 
border: 2px solid black;
background-color:#FFF;
color:#000;  
left:50% ; 
margin-left:-150px;
display:none ;
border-radius:7px;  
z-index:10;
}
4

3 に答える 3

1

あなたのdivddivは持っていposition:fixedます。私はあなたがそれであなたが望むことを達成することができないと思います。

を使用して追加のコンテナdivを挿入し、その中position:relativeにすべてのdivを。を使用して配置します。または、さらに良いことに、すべてのdivを作成するだけで、HTML内のすべての属性を削除できます。divdposition:absolutedivdfloat:leftstyle

後者のアプローチのjsfiddleの例を次に示します。http：//jsfiddle.net/4EUVE/1/

于 2013-02-19T11:07:47.527 に答える
1

次のように使用できます。

 .divd {
    width: 50px;
    height: 50px;   
    border: 1px solid black;
    background-color:#999; 
    border-radius:5px;  
    }

    #FloatMain {
     background-color: #FFFFFF;
        border: 2px solid black;
        border-radius: 7px 7px 7px 7px;
        color: #000000;
        height: 300px;
        width: 300px;
        overflow-y:scroll;
    }
于 2013-02-19T10:36:42.357 に答える
0

前に追加したオーバーフロー プロパティを保持し、追加します。

<div style="clear:both"/>親divを終了する前。それがうまくいくことを願っています。

于 2013-02-19T10:33:27.617 に答える