Make the divs in a single line on animate

Question

I have a footer div which have child divs which need to move horizontally.This works fine,but I need to make all the divs to be in a single line,rather than breaking the divs. The count of divs with class img1 can be unlimited according to the database query result. I am not much expertised in css.Please help me.

.footer
{
    background-color:grey;
    overflow:hidden;
    width:100%;
    float:left;
    padding:1%;
    margin-top:2%;
}
.container
{
   padding:1%; 
   width:90%;
   overflow:hidden;  

}
.marquee{
  display:block;
  position:relative;
  width:100%;
  padding:1%;
  animation:scroll 10s linear infinite;
  padding:2%;
}
.marquee:hover {
  animation-play-state: paused
}

.img1 {
  width:15%;
  padding:1%;
  background-color:#f6f6f6;
  margin:1%;
  float:left;
}

/* Make it move */
@keyframes scroll{
  0% {left:100%;}
  100% {left:-100%;}
}

<div class="footer">
    <div class="row">
      <div class="container">
        <div class="marquee">
          <div class="img1">Winner 1</div>  
          <div class="img1">Winner 2</div> 
          <div class="img1">Winner 3</div> 
          <div class="img1">Winner 4</div>
          <div class="img1">Winner 5</div>
          <div class="img1">Winner 6</div>
        </div>
      </div>
   </div>
</div>
<div class="clear"></div>

score 1 · Accepted Answer · edited Oct 24 '18 at 08:22

1

I have done like this Hope below is my sample code

.footer {
  background-color: grey;
  overflow: hidden;
  width: 100%;
  float: left;
  padding: 1%;
  margin-top: 2%;
}

.container {
  padding: 1%;
  width: 90%;
  overflow: hidden;
}

.marquee {
  display:-ms-flexbox;/* For IE*/
  display:flex;
  position: relative;
  width: 100%;
  animation: scroll 10s linear infinite;
  padding: 2%;
}

.marquee:hover {
  animation-play-state: paused
}

.img1 {
  padding: 1% 5%;
  background-color: #f6f6f6;
  margin: 1%;
  float: left;
}


/* Make it move */

@keyframes scroll {
  0% {
    left: 100%;
  }
  100% {
    left: -100%;
  }
}

<div class="footer">
  <div class="row">
    <div class="container">
      <div class="marquee">
        <div class="img1">Winner 1</div>
        <div class="img1">Winner 2</div>
        <div class="img1">Winner 3</div>
        <div class="img1">Winner 4</div>
        <div class="img1">Winner 5</div>
        <div class="img1">Winner 6</div>
      </div>
    </div>
  </div>
</div>
<div class="clear"></div>

edited Oct 24 '18 at 08:22

Techy

2,626
7
41
88

answered Oct 24 '18 at 08:02

Mehraj Khan

927
6
17

you have modified `padding: 1% 5%` for `img1`.This is not working for me – Techy Oct 24 '18 at 08:05
@Techy see my codepen link https://codepen.io/Merajkhan/pen/gBvPpr its working fine. i was removed img width. – Mehraj Khan Oct 24 '18 at 08:06
I have seen that..but when we add more divs upto 10 or 15 ,it breaks the line .Can you add more divs and check,then you will udnerstand – Techy Oct 24 '18 at 08:09
@you have used display:flex.Thanks for your support – Techy Oct 24 '18 at 08:13
@Techy Internet Explorer doesn't fully support Flexbox [Refer this](https://stackoverflow.com/a/43979973/7978664) – Mehraj Khan Oct 24 '18 at 08:22

Make the divs in a single line on animate

1 Answers1