Próbuję utworzyć <div> z serią zdjęć, które można przewijać tylko w poziomie.Poziome przewijanie CSS
Powinno to wyglądać mniej więcej tak: LINK;
Powyższe można jednak osiągnąć tylko podając szerokość dla <div>, która zawiera zdjęcia (aby nie zawierały "zawijania tekstu"). Jeśli nie dodaję szerokości - wygląda to tak; LINK
Co można zrobić za pomocą CSS, aby zapobiec wprowadzaniu stałej szerokości, ponieważ obrazy mogą się różnić.
Dzięki
Można użyć display:inline-block z white-space:nowrap. Napisz tak:
.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;
}
Sprawdź to sprawdzić http://jsfiddle.net/YbrX3/
ten link tu zmienić display: inline-block http://cssdesk.com/gUGBH
Podczas gdy ten link może odpowiedzieć na pytanie, lepiej umieścić tutaj istotne części odpowiedzi i podać link do odsyłacza. Odpowiedzi dotyczące linków mogą stać się nieprawidłowe, jeśli strona z linkami się zmieni. –
użyć tego kodu do generowania zawartości poziomych bloków przewijania. Mam to stąd 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>
spróbować użyć struktury tabeli, to jest bardziej kompatybilny wstecz. to sprawdzić Horizontal Scrolling using Tables
To działa bardzo dobrze - dzięki –
@sandeep plz mi pomóc użyłem ur css, który jest w jsfiddle i załóżmy jakieś dane r Cuming dynamicznie przez ajax callin który przechowuje w przycisk, który znajduje się w stopce jak teraz mogę przewijać ten przycisk, a nie tylko stronę ze stopką –
Jak obsługiwać przewijanie, chwytając obrazek i przeciągając w lewo/w prawo? –