在主div内滚动一个div集合

Question

我有一组沿着页面顶部水平走向的小型div盒，可以有多达50个我想要在现有大型div内滚动显示。我已经设置了主'FloatMain'div溢出：滚动和我虽然这将是答案，但小divs只是保持流动主分区。我已经看过这里的所有解决方案，但没有任何东西似乎帮助我解决特定问题，请提供任何帮助？

<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的div有position:fixed。我不认为你可以用这个来达到你想要的。

我会插入一个额外的容器格与position:relative，然后把你所有的divd divs与position:absolute。或者，更好的是，只需制作所有divd div float:left，然后就可以删除HTML中的所有这些style属性。

下面是后一种方法一的jsfiddle例如：http://jsfiddle.net/4EUVE/1/

Answer 2

保持overflow属性为您添加之前和结束的div父前添加

<div style="clear:both"/>。希望它能起作用。

Answer 3

你可以使用这样的：

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