块元素怎么横向滚动 类似于轮播图那种

Question

<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>

想把照片横向滚动

给父元素设置宽度 然后overflow-x: scroll, 但是every-content会自动换行

请各位大佬给个思路 试了好多种办法 没有效果

Answer 1

给container外层添加一个元素，这个元素是一个显示窗口，加上overflow:hidden；
container的宽度动态设定为里面元素宽度的总和；
动态设置绝对定位的container的left值就可以了

Answer 2

少了一层，一般最外层overflow: hidden然后中间层移动

Answer 3

overflow: hidden 可以实现

Answer 4

综上，父元素还得加上：white-space: nowrap;