Ich versuche, eine <div> mit einer Reihe von Fotos zu erstellen, die nur horizontal scrollbar sind.CSS horizontale scroll
Es sollte in etwa so aussehen: LINK;
Das obige wird jedoch nur erreicht, indem eine Breite für die <div> angegeben wird, die die Fotos enthält (also nicht "Word-Wrap"). Wenn ich keine Breite einstelle - sieht das so aus; LINK
Was kann ich mit CSS tun, um eine feste Breite zu vermeiden, da die Bilder variieren können?
Dank
können Sie display:inline-block mit white-space:nowrap verwenden. Schreiben wie folgt aus:
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 80px;
white-space:nowrap
}
.imageDiv img {
box-shadow: 1px 1px 10px #999;
margin: 2px;
max-height: 50px;
cursor: pointer;
display:inline-block;
*display:inline;/* For IE7*/
*zoom:1;/* For IE7*/
vertical-align:top;
}
Sehen Sie sich diese http://jsfiddle.net/YbrX3/
Check diesen Link hier i-Display ändern: inline-block http://cssdesk.com/gUGBH
Während dieser Link die Frage beantworten kann, ist es besser, die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz zur Verfügung zu stellen. Nur-Link-Antworten können ungültig werden, wenn sich die verknüpfte Seite ändert. –
Mit diesem Code horizontales Scrollen Blöcke Inhalte zu erzeugen. Ich habe diese von hier http://www.htmlexplorer.com/2014/02/horizontal-scrolling-webpage-content.html
<html>
<title>HTMLExplorer Demo: Horizontal Scrolling Content</title>
<head>
<style type="text/css">
#outer_wrapper {
overflow: scroll;
width:100%;
}
#outer_wrapper #inner_wrapper {
width:6000px; /* If you have more elements, increase the width accordingly */
}
#outer_wrapper #inner_wrapper div.box { /* Define the properties of inner block */
width: 250px;
height:300px;
float: left;
margin: 0 4px 0 0;
border:1px grey solid;
}
</style>
</head>
<body>
<div id="outer_wrapper">
<div id="inner_wrapper">
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<!-- more boxes here -->
</div>
</div>
</body>
</html>
versuchen Tabellenstruktur verwendet wird, es wieder kompatibel ist. Check this out Horizontal Scrolling using Tables
Das ist wirklich gut funktioniert - dank –
@sandeep plz help me out i verwendet ur CSS, die in jsfiddle ist und einige Daten r cuming dynamisch von Ajax Callin annehmen, die in Taste zu speichern, die jetzt in der Fußzeile ist, wie Ich kann diese Schaltfläche nicht Fenster Seite nur Fuß scrollen –
Wie unterstützt man auch Scrollen, indem Sie ein Bild und Ziehen nach links/rechts? –