Wie bekomme ich horizontales Scrollen mit dem div-Element?

Ich habe dieses div-Element:Wie bekomme ich horizontales Scrollen mit dem div-Element?

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

Die div Demo durch den Code mehrmals innerhalb tl div kopiert. Ich möchte das Scrollen horizontal der tl Div.

Wie kann ich es erreichen?

Quelle

2009-08-24 avnic

Nur als Nebenbemerkung, der Wert e des Attributs 'id' sollte eindeutig sein. –

@ Nikc iths nur für das Beispiel können Sie es für andere div mit float links betrachten – avnic

Auf den ersten Blick scheint das Markup wie es funktionieren sollte. Wenn Sie überlaufen-x: auto; es wird nicht die Bildlaufleiste zeigen, wenn sie nicht benötigt werden – Zoidberg

Für Ihre "Demo" divs, ändern float: left anzuzeigen: inline-block; dann sollte es funktionieren.

Auch hierzu finden Sie Stack-Überlauf Frage "How to get Floating DIVs inside fixed-width DIV to continue horizontally?" für weitere Vorschläge ...

EDIT: als timhessel in den Kommentaren sagt unten, 6/7 Internet Explorer nicht inline-block für div-Elemente übernehmen, so dass Sie Sie müssen stattdessen "span" -Elemente für die "demo" -Divs verwenden, da sie standardmäßig inline sind.

Quelle

2009-08-24 11:45:50 Paul

IE 6 und 7 nicht akzeptieren Inline-Block für divs oder andere Elemente, die haben ein intrinsischer Anzeigewert des Blocks. –

Das ist richtig, also sollten die "Demo" -Divs geändert werden, um stattdessen Elemente zu überspannen. – Paul

hi ich habe es in geändert etwas Text es funktioniert auch nicht so wie es sein sollte dort ist Horizontal Scrolling, aber ich kann nicht blättern – avnic

Wenn Sie jQuery verwenden, habe ich Folgendes verwendet, um zu tun, was ich denke, dass Sie wollen.

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

Quelle

2009-08-24 11:32:34 Brian

hi es ist nicht das, was ich meinte ich will nur der Benutzer kann horizontale Scrolling Div, aber danke – avnic

Nach einigen Nachforschungen, und ein paar Dinge auszuprobieren, glaube ich, was Sie versuchen zu tun, kann nicht wirklich erreicht werden, ohne einen zusätzlichen Container, der eine feste Breite hat, wie schwimmende Elemente stapeln sich Größe des Behälters.

Die 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; 
    }

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

Siehe Live-Demo: http://nikc.kapsi.fi/dev/html/misc/horiz-scroll.html

auch einen Blick auf eine ähnliche Frage nehmen, fragte vor: HTML Divs, Columns, Horizontal Scroll Bar

Quelle

2009-08-24 12:09:11

Wie bekomme ich horizontales Scrollen mit dem div-Element?

Antwort

Verwandte Themen