Question

我有一个非常简单的问题，我无法克服。我有一个父div，里面有4个图像，我希望图像从父div（水平）溢出但我似乎无法实现这一点。

.imgBanner {
   border: 1px solid black;
   width: 400px;
   height: 400px;
   display: inline-block;
}
.slideShow {
   width: 400px;
}

<div class="slideShow">
  <img class="imgBanner">
  <img class="imgBanner">
  <img class="imgBanner">
  <img class="imgBanner">
</div>

这是我正在使用的代码，但它似乎没有溢出，即使我使用display inline-block。

结果将隐藏溢出的图像，并使用JavaScript创建幻灯片。

编辑：忘了添加小提琴。 https://jsfiddle.net/pwL2hy7s/

谢谢:)

Answer 1

您可以使用

white-space: nowrap;

在容器上。这将允许元素继续内联，而不会被迫中断。

Answer 2

我认为这正是你想要实现的目标。请参阅下面的演示和评论。

＆＃13;

.slideShow {
  width: 400px;
  white-space: nowrap; /*prevent wrapping*/
  overflow: auto; /*show scrollbar as needed*/
  font-size: 0; /*remove whitespace*/
}
.imgBanner {
  background: aqua;
  width: 400px;
  height: 400px;
  display:inline-block;
  vertical-align: top;
}
.imgBanner:nth-child(odd) {
  background: gold;
}

＆＃13;

<div class="slideShow">
  <div class="imgBanner"></div>
  <div class="imgBanner"></div>
  <div class="imgBanner"></div>
  <div class="imgBanner"></div>
</div>

＆＃13;

详细了解How to remove the space between inline-block elements?

处的内联块空格

使图像div水平溢出父div

2 个答案: