如何强制水平滚动取决于内容的大小

问题描述：

我想有一个水平滚动条，如果有必要，通过让'child'div被逐个添加而不是在父对象被推到下一行时'足够宽。如何强制水平滚动取决于内容的大小

我的代码如下。如果你设置.mid的宽度为：1000px，你会看到我要做的，只有我只希望它和动态生成的孩子一样宽。

<html> 
<head> 

    <style type="text/css"> 

     .parent { 
      width: 400px; 
      background-color: #666; 
      overflow:scroll; /* cater to the older browsers */ 
      overflow-y:hidden; /* Hide vertical*/ 
     } 

     .mid { 
      background-color: red; 
     } 

     .child { 
      display:inline-block; 
      background-color: #ccc; 
      border: 1px solid black; 
      width: 190px; 
     } 

    </style> 

</head> 
<body> 
    <div class="parent"> 
     <div class="mid"> 
      <div class="child"> 
       I am a child. 
      </div> 
      <div class="child"> 
       I am a child. 
      </div> 
      <div class="child"> 
       I am a child. 
      </div> 
     </div> 
    </div> 

</body> 
</html>

您可能需要使用Javascript才能做到这一点。你会接受这样的解决方案吗？ – 2010-08-31 03:50:25

答

人们以前来过这里，找到了最好/最简单的方法来做到这一点。看看这里：

http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/

答

你可以尝试使用overflow:auto

还是我误解了问题 – Kieran 2010-08-31 04:02:52

是的，你有。 ;） – 2010-08-31 04:15:58

哦，很好的澄清你的话。 – Kieran 2010-08-31 04:31:39

答

哎呀，还不如回答这个问题。你将需要使用Javascript，但是鉴于你已经使用它来动态生成子元素，它不应该是一个问题。

假设你正在使用jQuery，添加这两条线在生成元素之后：

var child = $('child'); 
$('.mid').width(child.length * child.outerWidth(true));

很抱歉的误解

利用这一点，但是，将创建另一个问题。当您使用display: inline-block时，每个div后面都会添加一个空白，所以jQuery无法获得正确的宽度。如果你使用float: left，这不会发生。

我实际上是在Rails中生成一个循环中的子项，而不是JavaScript。这听起来像你在说float：left也会解决问题，但那不起作用。 – 99miles 2010-08-31 04:09:46

@ 99miles：不，我的意思是这两个*一起*会解决你的问题。我通常不喜欢使用'display：inline-block'来获取排列在一起的元素。 – 2010-08-31 04:15:34

不，他是说在一些动态代码中添加多少元素，然后设置中间的宽度。＃ – Kieran 2010-08-31 04:31:14

如何强制水平滚动取决于内容的大小

相关推荐