Question

我有一组小div框沿着我的页面顶部水平移动，我想在现有的较大div中显示为可滚动的最多50个。我已将主要的'FloatMain'div设置为溢出：滚动而我虽然这将是答案但是小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;
}

Answer 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;
    }

Answer 2

您的divd div有position:fixed。我不认为你可以通过它实现你想要的。

我会使用position:relative插入一个额外的容器div，然后将所有divd div放在position:absolute内。或者，更好的是，只需制作所有divd div float:left，然后就可以删除HTML中的所有style属性。

这是后一种方法的一个例子：http://jsfiddle.net/4EUVE/1/

Answer 3

保留之前添加的溢出属性并添加

在结束父div之前

<div style="clear:both"/>。希望它能奏效。

滚动主div内的div集合

3 个答案: