我如何才能使最后一个div不会在悬停时流入下一行？

Question

I want to make it so that the div with the id #watching-margin does not get pushed over into the next line of divs when I hover on the 11th div. Instead, I'd like it so that it would just move to the right without interruption, and possibly just hiding part of the id #watching-margin to keep the flow nice. Thank you!

 #section{ width:100%; margin:auto; overflow:hidden; } .container{ width:80%; margin:auto; margin-top:20px; text-align:center; padding:2px; } .watching{ position:relative; width:12%; float:left; border:1px solid black; height:250px; background-color:red; } .watching img{ width:100%; height:200px; } .watching{ margin-left:-50px; transition:.3s ease; } .watching:hover{ margin-right:50px; transition:.3s ease; } #watching-margin{ margin-left:-50px; } #watching-margin:hover{ margin-right:0; overflow:hidden; } 

 <section id=section> <div class="container"> <div class="watching"> <div class="img"></div> </div> <div class="watching"> <div class="img"></div> </div> <div class="watching"> <div class="img"></div> </div> <div class="watching"> <div class="img"></div> </div> <div class="watching"> <div class="img"></div> </div> <div class="watching"> <div class="img"></div> </div> <div class="watching"> <div class="img"></div> </div> <div class="watching"> <div class="img"></div> </div> <div class="watching"> <div class="img"></div> </div> <div class="watching"> <div class="img"></div> </div> <div class="watching"> <div class="img"></div> </div> <div class="watching" id="watching-margin"> <div class="img"></div> </div> <div class="watching"> <div class="img"></div> </div> <div class="watching"> <div class="img"></div> </div> </div> </section> 

Answer 1

An idea is to switch to inline-block element instead of float and use white-space:nowrap on container so that you keep them always in the same line:

 #section { width: 100%; margin: auto; overflow: hidden; } .container { width: 80%; margin: auto; margin-top: 20px; text-align: center; padding: 2px; font-size:0; white-space:nowrap; } .watching { position: relative; width: 12%; display: inline-block; border: 1px solid black; height: 250px; background-color: red; font-size:initial; } .watching img { width: 100%; height: 200px; } .watching { margin-left: -50px; transition: .3s ease; } .watching:hover { margin-right: 50px; transition: .3s ease; } #watching-margin { margin-left: -50px; } #watching-margin:hover { margin-right: 0; overflow: hidden; } 

  <section id=section> <div class="container"> <div class="watching"> <div class=img></div> </div> <div class="watching"> <div class=img></div> </div> <div class="watching"> <div class=img></div> </div> <div class="watching"> <div class=img></div> </div> <div class="watching"> <div class=img></div> </div> <div class="watching"> <div class=img></div> </div> <div class="watching"> <div class=img></div> </div> <div class="watching"> <div class=img></div> </div> <div class="watching"> <div class=img></div> </div> <div class="watching"> <div class=img></div> </div> <div class="watching"> <div class=img></div> </div> <div class="watching" id="watching-margin"> <div class=img></div> </div> <div class="watching"> <div class=img></div> </div> <div class="watching"> <div class=img></div> </div> </div> </section>