Question

我有一个包含两行图像的块。每个图像都是内联块。我需要固定大小的容器宽度和高度，当图像为12或更多时，我们应该看到x滚动条不是y，并且所有溢出图像应该到右侧而不是底部。现在所有照片都会下降到第三行。

我的容器css：

  text-align: left;
  white-space: normal;
  height: auto;
  overflow-x: scroll;

我在容器中的图片：

  display: inline-block;
  width: 100px;
  margin-right: 17px;
  cursor: pointer;
  -webkit-box-shadow: 0px 7px 17px -6px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 7px 17px -6px rgba(0,0,0,0.2);
  box-shadow: 0px 7px 17px -6px rgba(0,0,0,0.2);

请在此处查看示例：http://i.imgur.com/dk9PPrw.png

Answer 1

我通过javaScript解决它。只需在奖励中找到中间元素，然后在它突破后添加。

var numberAwards = $('.b-awards .e-award').length;
$('.b-awards .e-award').eq(numberAwards/2-1).after( "<div class='e-award__break-line' style=\"content: '\\A' \"></div>" );

带x溢出的两行图像：滚动

1 个答案: