如何使用div元素進行水平滾動？

我有這樣的div元素：如何使用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。

我該如何實現它？

來源

2009-08-24 avnic

： http://nikc.kapsi.fi/dev/html/misc/horiz-scroll.html

而且看看類似的問題問過正如一個旁註，價值「id」屬性的e應該是唯一的。 – 2009-08-24 11:35:36

@ nikc iths僅適用於該示例，您可以考慮將其用於其他帶有浮動的div – avnic 2009-08-24 11:37:33

乍一看，該標記看起來應該起作用。如果你做overflow-x：auto;它不會顯示滾動條，如果他們不需要 – Zoidberg 2009-08-24 11:43:51

爲了您的「演示」的div，變化浮動：左顯示：inline-block的;那麼它應該工作。

而且，看到堆棧溢出問題「How to get Floating DIVs inside fixed-width DIV to continue horizontally?」更多建議...

編輯：作爲timhessel在下面的評論說，Internet Explorer的6/7將不接受div元素inline-block的，所以你需要爲「演示」div使用span元素，而不是默認情況下它們是內聯的。

來源

2009-08-24 11:45:50 Paul

IE 6和7不接受內聯塊或divs或其他元素一個塊的顯示值。 – 2009-08-24 11:48:53

這是真的，所以「演示」div應改爲span元素。 – Paul 2009-08-24 11:53:56

您好，我將其更改爲一些文本它也不工作，因爲它應該有水平滾動，但我不能滾動 – avnic 2009-08-24 12:11:20

如果您使用的是jQuery，我一直在使用以下來做我認爲你想要的。

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

來源

2009-08-24 11:32:34 Brian

嗨它不是我的意思我只想用戶可以水平滾動div，但是謝謝 – avnic 2009-08-24 11:35:07

在做了一些研究並嘗試了一些東西之後，我相信你想要做的事情，如果沒有一個額外的容器，它具有固定的寬度，就不能實現，因爲根據容器的大小。

的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>

見現場演示： HTML Divs, Columns, Horizontal Scroll Bar

來源

2009-08-24 12:09:11

如何使用div元素進行水平滾動？

回答

相關問題