Question

我有这个div元素：

    <div id="tl"  style="float:right;width: 400px; height:100px; background-color:Green; overflow-x: scroll;overflow-y: hidden;">

        <div id='demo' style="float:left;height:90px;"> dsadsad </div>
        <div id='demo' style="float:left;height:90px;"> dsadsad </div>

    </div>

div演示将在tl div中通过代码复制更多次。我想水平滚动tl div。

我怎样才能实现它？

Answer 1

对于“demo”div，更改float：left to display：inline-block;它应该工作。

另外，请参阅Stack Overflow问题“How to get Floating DIVs inside fixed-width DIV to continue horizontally?”以获取更多建议......

编辑：正如timhessel在下面的评论中所说，Internet Explorer 6/7不会接受div元素的内联块，因此您需要使用span元素作为“demo”div，因为默认情况下它们本质上是内联的。

Answer 2

经过一些研究，并尝试了一些事情，我相信你要做的事情，如果没有一个额外的容器，它有一个固定的宽度，真的无法实现，因为浮动元素根据大小堆叠自己容器。

CSS：

    div.horiz-container {
        border: 1px solid silver;
        height: 100px;
        overflow-x: auto;
        overflow-y: hidden;
        whitespace: nowrap;
        width: 400px;
    }

    div.horiz-container div.content {
        float: left;
        display: inline;
        height: 100px;
        width: 500px;
    }

    div.horiz-container p {
        float: left;
        display: inline;
        height: 100px;
        width: 100px;
        text-align: center;
        position: relative;
    }

HTML：

<div class="horiz-container">
    <div class="content">
        <p>Lorem</p
        <p>ipsum</p>
        <p>dolor</p>
        <p>sit</p>
        <p>amet</p>
    </div>
</div>

查看现场演示： http://nikc.kapsi.fi/dev/html/misc/horiz-scroll.html

另外看看之前提出的类似问题： HTML Divs, Columns, Horizontal Scroll Bar

Answer 3

如果您使用的是jQuery，我一直在使用以下内容来执行我认为您想要的操作。

http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html

如何使用div元素进行水平滚动？

3 个答案: