html - 如何使div适合其内容的宽度而又不使它们换行，同时使其宽度大于父级

请参阅此jsfiddle中的代码：https://jsfiddle.net/frpL3yr1/

我的想法是，我希望在屏幕顶部显示一个图像栏。 img-wrapper div稍后将通过javascipt进行动画处理，以将鼠标悬停在其左侧。有关我最终要完成的工作的示例，请参见this页。区别在于，在我的系统中，动画仅在鼠标悬停时才会运行。

问题是在我的jsfiddle和链接的示例中，包含图像的div的宽度是硬编码的。就我而言，css将img-wrapper的宽度硬编码为200％。我需要页面支持任意数量的图像，因此我需要页面的宽度等于内容的宽度。我的jsfiddle的实现方式，如果img-wrapper中可以容纳更多图像，它们将换行。

解决此问题的最佳方法是什么？

最佳答案

使用flexbox和animation的方法：

html, body {
  margin:0;
  padding:0;
  overflow: hidden;
}

.demo-ribbon {
  width: 100%;
  height: 70vmin;
  margin-top: 2rem;
  overflow: hidden;
}
.img-wrapper {
  height: 70vmin;
  width: 100%;

  display: flex;
  flex-flow: row nowrap;
  justify-content: stretch;
}

img {
  flex: 1;
  object-fit: content;
  margin: 0 .2rem;
  width: 100vmin;
  height: 100%;
}
.lead {
  animation: bannermove 12s linear 320ms infinite paused alternate;
}

.img-wrapper:hover .lead {
  animation-play-state: running;
}

@keyframes "bannermove" {
 0% {
    margin-left: 0%;
 }
 100% {
    margin-left: -230%;
 }
}

您需要添加前缀才能在所有浏览器中工作，尤其是animation

进一步阅读：https://devdocs.io/css/animation

工作笔：https://codepen.io/manAbl/pen/KROvjx；

长宽比：https://www.w3schools.com/howto/howto_css_aspect_ratio.asp和https://css-tricks.com/aspect-ratio-boxes/

希望有帮助！ :)

关于html - 如何使div适合其内容的宽度而又不使它们换行，同时使其宽度大于父级，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50546185/