Leave inline images in a div overflow

Asked

Viewed 24 times

-3

Well, I’m trying to make a "slider" with the use of css overflow, but I’m having problems because I can’t align the images. When I give 100% width to div The images are in 2 columns below each other, and what I want is for them to be aligned

(I put image because html bugged)

inserir a descrição da imagem aqui

css html5

1 answer

0

You could use flexbox in div .ove, because then the images were aligned next to each other. Just put display: flex in the div .ove:

.ove{
   width: 100%;
   overflow: auto;
   display: flex; /* flexbox */
}

.ove img{
   width: 600px;
   /* display: inline-block;
   position: relative; */
   height: 300px;
}
<div class="ove">
   <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
   <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
   <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
   <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">

   <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
   <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
   <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
   <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
</div>

The properties you applied to the images, display: inline-block; and position: relative; are irrelevant. Images are already inline by default, and change to inline-block won’t make a difference.

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.