Question

我目前正在努力寻找一个网站，我不知道从哪里开始这段代码。

我有一个容器div，.overflow-block1，里面有4个图像div，.block-container。这些是通过php和JS自动引入的，这个容器中有54个图像块。

目前我正在使用JS向.overflow块添加一个类，它将宽度增加到25750px，以便在一行中将所有图像块放在彼此旁边。

这个问题是，随着内容的添加，他们现在需要更多的宽度，所以我必须手动添加更多的宽度，但内容将定期添加，我不希望花费余生来改变这个宽度每次添加内容时阻止。

有人能指出我正确的方向使用JS自动设置容器宽度以适应所有图像块吗？

谢谢

Answer 1

正如我在评论中写的那样，这里只有CSS的解决方案。

#parent {
  overflow-x: hidden;
  width: 190px;
}

#container {
  white-space: nowrap;
  border: 1px solid #f0f;
  width: 190px;
  overflow-x: visible;
}

#container>div {
  background: #ccc;
  width: 50px;
  height: 50px;
  display: inline-block;
  /* for IE6/7, remove if you don't need to support those browsers */
  *display: inline;
  zoom: 1
}

<div id="parent">
  <div id="container">
    <div>aaa</div>
    <div>bbb</div>
    <div>ccc</div>
    <div>ddd</div>
    <div>eee</div>
    <div>fff</div>
  </div>
</div>

使用JS调整容器div

1 个答案: