0

这是我对这个问题的第二次尝试。我把第一次尝试弄得一团糟，并要求将其删除。

所以，我基本上有很多item100 像素宽的小 div，我想要在一条水平线上（它们永远不能换行到下一行），包含在另一个 300 像素的 div 中container。

我需要containerdiv 有一个水平滚动条，所以我可以左右滚动，而不允许较小的itemdiv 换行到下面的行。

请记住，我不知道item最终结果将包含多少个 div，container因为它们将动态生成。

可以在 IE8 中执行此操作吗？

在这个jsfiddle示例中，唯一的问题似乎是items 正在换行到下面的行。我认为如果它们停留在单条顶部水平线上，水平滚动条就会起作用。

4

3 回答 3

4

而不是float: left，使用display: inline-blockon .item。然后，添加white-space: nowrap以.container防止包装。

这适用于 IE7/8 和所有现代浏览器。

见：http: //jsfiddle.net/thirtydot/M2sgv/22/

.container {
    width: 300px;
    overflow-x: scroll;
    white-space: nowrap;
}

.item {
    width: 100px;
    display: inline-block;
    *display: inline; /* for ie7 */
    zoom: 1;
}
于 2012-06-22T11:53:00.047 回答
0

这是解决方案http://jsfiddle.net/M2sgv/21/

刚刚添加了另一个固定宽度为“1200px”的容器，您可以选择任何宽度。其次，我添加了“溢出：自动；” 到容器div的css并删除溢出-x，溢出-y。并非所有浏览器都支持这两个，因此请避免使用它们。上述解决方案适用于所有浏览器。

于 2012-06-22T12:01:57.077 回答
0

您可以使用 JQuery 来实现这一点，这里是Jsfiddle

这是更新的代码：-

jQuery代码： -

$(document).ready(function(){
   var contWidth = $('.container .item').length * $('.container .item').width();
   $('.container').width(contWidth);    
});​

HTML:-

<div class="scrollContainer">
    <div class="container">    
        <div class="item">item 1</div>
        <div class="item">item 1</div>
        <div class="item">item 1</div>
        <div class="item">item 1</div>
        <div class="item">item 1</div>
        <div class="item">item 1</div>
        <div class="item">item 1</div>
        <div class="item">item 1</div>
        <div class="item">item 1</div>
        <div class="item">item 1</div>
    </div>
</div>

​CSS ：-

.scrollContainer 
{
    width: 500px;
    overflow: auto;
}
.item
{
    width:100px;
    float:left;
}

编辑 ：-scrollContainer宽度可以根据您的要求任意。

于 2012-06-22T12:06:35.843 回答