1

我有 3 个嵌套的 div 集。顶部 div 容器是灰色的。它包含一个黄色的 div，后者包含 5 个彩色的白色 div。

我对 CSS 溢出的行为和连续 div 的虚拟线连续性（显示：内联）有疑问。

我无法弄清楚我做错了什么。我希望在达到黄色框视点（或任何视点）的最大宽度时将嵌套的白色 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>
4

2 回答 2

1

添加这个：

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-14T21:07:40.220 回答
1

我不确定我是否理解正确，但如果你试图让内部（白色）div 排成一行，并添加一个水平滚动，而不是向下滚动，这是一个解决方案：

我添加了以下 css ：

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

这是一个示例。

于 2012-06-14T21:07:51.593 回答