如何用滚动条在一行上生成大量的堆叠div div

我有3个嵌套div集。顶部div容器是灰色的。它包含一个黄色的div，后者包含5个白色的div。如何用滚动条在一行上生成大量的堆叠div div

我有一个CSS溢出的行为和连续的div（display：inline）的虚拟线路连续性的问题。

我搞不清楚我做错了什么。我希望将嵌套的白色div保存在一行（对于任何数量的白色div）和滚动条，只有在达到黄色方块视点（或任何视点）的最大宽度时进行水平导航。相反，当达到黄色方框宽度限制时，我的白色方块会发生变化。有没有办法做到这一点以简单的方式，没有javascript的帮助？

请帮助，将不胜感激？

在此先感谢。

守则如下：

<html> 
<head> 
<title>Playground</title> 
<script src="scripts/jquery.js" type="text/javascript"></script> 
<style type="text/css"> 
    div#mysupracontainer { 
    position: absolute; 
border:3px solid #000; 
    background-color: gray; 
left:250px; 
    width: 700px; 
height: 500px; 
    overflow-x: auto; 
    } 
    div#panels { 
    position: absolute; 
border:3px solid #000; 
    background-color: yellow; 
left:10px; 
width: auto; 
height: 350px; 
    border-style:dotted; 
overflow-x: hidden; 
    } 
    .panelslide { 
    display:inline; 
float: left; 
border:3px solid #000; 
position: relative; 
    background-color: white; 
width: 150px; 
height: 280px; 
    } 
    </style> 
</head> 
<body> 
    <div id="mysupracontainer" ><p>container</p> 
    <div id="panels" ><p>panels</p> 
     <div class="panelslide">panelslide-1</div> 
     <div class="panelslide">panelslide-2</div> 
     <div class="panelslide">panelslide-3</div> 
     <div class="panelslide">panelslide-4</div> 
     <div class="panelslide">panelslide-5</div> 
    </div> 
    </div> 
</body> 
</html>

来源

2012-06-14 Alain

补充一点：

div#panels { 
    white-space: nowrap; 
)

，并删除float: left;从.panelslide - 然后更改display: inline;到display: inline-block;，它应该是这样的：

.panelslide { 
    display:inline-block; 
    border:3px solid #000; 
    position: relative; 
    background-color: white; 
    width: 150px; 
    height: 280px; 
}

http://jsfiddle.net/aMPxc/

来源

2012-06-14 21:07:40 Luca

这工作正常。优秀和快速的答案，现在我将分析为什么这个工程。问候。 – Alain

很高兴它帮助！ – Luca

它在Firefox-12，Chrome-19上工作正常，但在IE v8上不太好。有没有办法纠正IE的行为？ – Alain

我不知道如果我理解正确的，但如果你试图让内（白色）的div进来一行，并添加一个水平滚动，而不是他们的到来向下，这是一个解决方案：

添加以下的CSS：

div#panels { 
     overflow-y: hidden; 
     height:286px; 
     white-space:nowrap; 
    } 
    .panelslide { 
     display:inline-block; 
     height: 280px; 
    }

Here是一个示例。

来源

2012-06-14 21:07:51

我猜这里的键元素是'white-space：nowrap'和显示设置。谢谢。 O操作。 – Alain

如何用滚动条在一行上生成大量的堆叠div div

回答

相关问题