CSS horizontal scroll

Solution 1:

You can use display:inline-block with white-space:nowrap. Write like this:

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

Check this http://jsfiddle.net/YbrX3/

Solution 2:

check this link here i change display:inline-block http://cssdesk.com/gUGBH

Solution 3:

Here's a solution with flexbox for images with variable width and height:

.container {
  display: flex;
  flex-wrap: no-wrap;
  overflow-x: auto;
  margin: 20px;
}
img {
  flex: 0 0 auto;
  width: auto;
  height: 100px;
  max-width: 100%;
  margin-right: 10px;
}

<div class="container">
   <img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/50x50" />
   <img src="http://placehold.it/5x50" />
   <img src="http://placehold.it/100x50" />
   <img src="http://placehold.it/50x100" />
   <img src="http://placehold.it/20x50" />
   <img src="http://placehold.it/50x30" />
   <img src="http://placehold.it/50x150" />
   <img src="http://placehold.it/250x50" />
   <img src="http://placehold.it/150x350" />
   <img src="http://placehold.it/50x350" />
   <img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/50x50" />
   <img src="http://placehold.it/5x50" />
   <img src="http://placehold.it/100x50" />
   <img src="http://placehold.it/50x100" />
   <img src="http://placehold.it/20x50" />
   <img src="http://placehold.it/50x30" />
   <img src="http://placehold.it/50x150" />
   <img src="http://placehold.it/250x50" />
   <img src="http://placehold.it/150x350" />
   <img src="http://placehold.it/50x350" />
</div>

Same working example on: JsFiddle

CSS horizontal scroll

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts