How do block elements scroll horizontally, similar to those in a broadcast picture?

<div class="container">
    <div class="every-content">
      <img src="../../static/homeImg/img_pxpj.png"/>
      <div>XXXX</div>
    </div>
    <div class="every-content">
      <img src="../../static/homeImg/img_pxpj.png"/>
      <div>XXXX</div>
    </div>   
    <div class="every-content">
      <img src="../../static/homeImg/img_pxpj.png"/>
      <div>XXXX</div>
    </div>   
    <div class="every-content">
      <img src="../../static/homeImg/img_pxpj.png"/>
      <div>XXXX</div>
   </div>
 </div>

clipboard.png

want to scroll the photo horizontally

set the width of the parent element and then overflow-x: scroll, but every-content wraps lines automatically

Please give me some ideas and try many ways to no avail.

Css
Mar.12,2021

add an element to the outer layer of container, which is a display window, plus the width of overflow:hidden;
container is dynamically set to the sum of the widths of the elements inside;
dynamically setting the left value of absolute positioning container

is missing one layer. Generally, the outermost layer overflow: hidden and then the middle layer moves

overflow: hidden can achieve

to sum up, the parent element should also be added: white-space: nowrap;

Previous: Jenkins-Blue Ocean problem

Next: When GCC compiles, undefined reference to appears

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu