Display items in one line with scroll CSS

Question

I am trying to display images in a single line horizontal with scroll but I can't figure how to I would appreciate it if anyone could help me.

CSS

.img {
  max-width: 400px;
  position: relative;
}


.animal {
  float: left;
  background-color: #fff;
  
}

.image-grid{
 flex-wrap: wrap;
  width: 1400px;
  margin: 0 auto;
}

.pet-photo {
 padding: 10px;
  display: block;
  box-sizing: border-box;
  flex-basis: 100%;
  float: left;
  padding: 20px;
  width: 200px;
  height: 300px;
  display: block;
  

}

js

<div class ="image-grid">
   <div class="animal">
   
    <img class="pet-photo " src="${pet.photo}" >
   
      
       <div class="olay" onclick="location.href='${pet.href}';" style="cursor: pointer;">
       <div id="mydiv">
  
      <h2 class="pet-name">${pet.name}
      
      <h1 class="species">${pet.species}
      
      </div>
       <div></div></div>
      </div>
   </div>

That's all thank you for reading :) really appreciate it.

Do you want something that looks like this? jsfiddle.net/plan/8jt8gr0s Play with that fiddle and then post some better code back here on stackoverflow. — FSDford
– FSDford, Commented Nov 18, 2020 at 7:29
Sorry, I meant horizontal scroll not vertical my bad forgot to add it. — jay
– jay, Commented Nov 18, 2020 at 7:44

Emy · Accepted Answer · 2020-11-18 08:04:05Z

solution is display: flex; with flex-wrap: nowrap;

.container-items {
  overflow: auto;
  width: 100%;
}
.items {
  display: flex;
  flex-wrap: nowrap;
}
.items .item {
  min-width: 150px;
  text-align: center;
  padding: 5px;
}
.items .item h2,
.items .item h3 {
  margin: 0;
}
.items .item img {
  width: 100%;
}

<div class ="container-items">
  <div class ="items">
     <div class="item">
        <img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
        <h2>here title</h2>
        <h3 class="species">here text</h3>
     </div>

     <div class="item">
        <img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
        <h2>here title</h2>
        <h3>here text</h3>
     </div>

     <div class="item">
        <img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
        <h2>here title</h2>
        <h3 class="species">here text</h3>
     </div>

     <div class="item">
        <img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
        <h2>here title</h2>
        <h3 class="species">here text</h3>
     </div>

     <div class="item">
        <img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
        <h2>here title</h2>
        <h3 class="species">here text</h3>
     </div>

     <div class="item">
        <img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
        <h2>here title</h2>
        <h3 class="species">here text</h3>
     </div>

     <div class="item">
        <img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
        <h2>here title</h2>
        <h3 class="species">here text</h3>
     </div>
  </div>
</div>

Hi! thanks for the answer I have seen tons of tutorials for this but as I said I could not figure it out I'm confused with the divs and stuff.

Collectives™ on Stack Overflow

Display items in one line with scroll CSS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related