弹性框与图像连续

时间:2017-06-29 13:04:58

标签: html css reactjs flexbox bootstrap-4

我正在使用引导面板连续显示三个图像。假设我总共有六个图像,我想连续显示三个图像,当我移动滚动条时,接下来的三个应该逐个显示。

为了应用滚动条,我做了overflow-x:visible,但屏幕上没有任何内容。

此外,第四张图像连续三张图像下方。

我应该怎样做才能使图像水平滚动,同时在屏幕上显示三个图像?

我的代码的codepen链接是:Link

1 个答案:

答案 0 :(得分:3)

这是你在找什么?



.container {
  display: flex;
  max-width: 225px;
  overflow-x: scroll;
}

<div class="container">
  <img src="http://placehold.it/75x50/000000">
  <img src="http://placehold.it/75x50/ff0000">
  <img src="http://placehold.it/75x50/333333">
  <img src="http://placehold.it/75x50/00ff00">
  <img src="http://placehold.it/75x50/666666">
  <img src="http://placehold.it/75x50/0000ff">
</div>
&#13;
&#13;
&#13;