Die Anzeige der Bilder in einer Zeile innerhalb einer kürzeren div
Wie kann ich einstellen, dass alle Bilder in einer Zeile und die Anzeige werden nur die ersten 200 Pixel von Ihnen innerhalb des div?
Ohne zu brechen das layout, oder bewegte Bilder auf eine nächste Zeile.
online-demo
<div id="thumbsContainer">
<ul>
<li><img src="http://img214.imageshack.us/img214/6030/small3.jpg" alt="" /></li>
<li><img src="http://img263.imageshack.us/img263/5600/small1ga.jpg" alt="" /></li>
<li><img src="http://img638.imageshack.us/img638/3521/small4j.jpg" alt="" /></li>
<li><img src="http://img682.imageshack.us/img682/507/small5.jpg" alt="" /></li>
<li><img src="
http://img96.imageshack.us/img96/6118/small2o.jpg" alt="" /></li>
</ul>
</div>
#thumbsContainer
{
width:200px;
overflow:hidden;
}
ul
{
list-style:none;
}
li
{
float:left;
}
InformationsquelleAutor nemiss | 2010-04-03
Du musst angemeldet sein, um einen Kommentar abzugeben.
Deine div-Breite ist zu kurz - wenn Sie wissen, dass Sie Bild-Größen und-Mengen up-front, nur fix die div-Breite zu passen.
Wenn Sie möchten, eine 200px div mit der horizontalen scrollen, dann "display:inline", um Ihre Liste posten, und 'overflow:auto' und 'white-space:nowrap' div.
Wenn du nicht weißt, Größen und/oder Mengen nach vorne, aber Sie wollen die Liste zu erweitern, in einer einzigen Zeile, egal was, dann müssen Sie möglicherweise eine Tabelle verwenden.
Dann mein zweiter Vorschlag sollte für Sie arbeiten. Konnte Sie diese Stile auf die div-oder ul-je nachdem, wie Sie wollen, Dinge zu suchen, in das endgültige design.
Wenn ich 'overflow:auto', es funktioniert, aber ich bekomme die horizontale scroll - Leiste- ich will es nicht, weil ich scrollen mit javascript
oh - ich sehe - ich denke, dann brauchst du 'overflow:hidden' - das ist die einzige Möglichkeit, die ich kenne, um die Bildlaufleiste ausblenden. Und die Tisch-Idee würde nicht funktionieren.
InformationsquelleAutor Ray
Gelten
display:inline
zu Ihremli
s.Gelten
width:200px
undoverflow:hidden
zu Ihremdiv
.InformationsquelleAutor ЯegDwight