0

我有一组小 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;
}
4

3 回答 3

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 回答
1

你的divddiv 有position:fixed. 我不认为你可以实现你想要的。

我会插入一个额外的容器 div position:relative，然后将所有divddiv 放入其中position:absolute。或者，更好的是，只需制作所有divddiv float:left，然后您可以删除styleHTML 中的所有这些属性。

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

于 2013-02-19T11:07:47.527 回答
0

保持您之前添加的溢出属性并添加

<div style="clear:both"/>在结束父 div 之前。希望它会起作用。

于 2013-02-19T10:33:27.617 回答