0

我有以下结构：

<div id='container'>
  <div id='cont1' style='width:150px'>Content 1</div>
  <div id='cont2' style='width:150px'>Content 2</div>
  <div id='cont3' style='width:150px'>Content 3</div>
  <div id='cont4' style='width:150px'>Content 4</div>
  <div id='cont5' style='width:150px'>Content 5</div>
</div>

我希望 divcontainer水平滚动。我想cont1一直cont5呆在里面container。我希望能够水平滚动这 5 个 div，并且可能我只想将一个contxdiv 放在另一个旁边，就像我在代码中显示的那样。

问题是我无法实现这个解决方案。例如考虑：

<div id='container'>
  <div id='internalcontainer' style='width:750px'>
    <div id='cont1' style='width:150px'>Content 1</div>
    <div id='cont2' style='width:150px'>Content 2</div>
    <div id='cont3' style='width:150px'>Content 3</div>
    <div id='cont4' style='width:150px'>Content 4</div>
    <div id='cont5' style='width:150px'>Content 5</div>
  </div>
</div>

在我看来相当复杂的做法是通过简单地将一个 div 放在另一个旁边（连续 div）来获得水平滚动。所以我尝试将它们放在一个固定宽度的容器中，该容器放置在应该执行水平滚动的 div 内。当我尝试对其进行样式设置时，即使此代码也不起作用。我的问题是：

  • 是否可以获得具有第一种结构的水平滚动？
  • 是否有可能获得第二种结构的水平滚动？

我用 css 尝试了很多overflow，但没有得到任何东西......

谢谢

4

2 回答 2

2

如果触发了 onmouseover 事件，您可以将样式overflow-x:scroll应用于容器 div，如果触发了 onmouseout，则将其重置overflow-x:hidden为。

编辑

这是您需要添加到容器 div 中的内容：

<div id='container' onmouseover='this.style["overflowX"]="scroll";'  onmouseout='this.style["overflowX"]="visible";'>
    ...
</div>

自己尝试一下：http: //jsfiddle.net/bukfixart/qX8Cx/

于 2013-01-06T00:15:44.517 回答
0

是的，这两种结构都是可能的。我将说明第一个，因为它不那么冗长。我将使用 flex box CSS3 特性：

#container {
  display: inline-flex;
  flex-direction: row;
}
<div id='container'>
  <div id='cont1' style='width:150px'>Content 1</div>
  <div id='cont2' style='width:150px'>Content 2</div>
  <div id='cont3' style='width:150px'>Content 3</div>
  <div id='cont4' style='width:150px'>Content 4</div>
  <div id='cont5' style='width:150px'>Content 5</div>
</div>

如果您想要容器本身中的滚动条，您可以添加：

#container {
  overflow-x: scroll;
}

于 2017-03-09T23:12:39.310 回答