当宽度超过时，Div不会停留在同一条线上

Question

我想在橙色div中获取图像（它们是div）以不转到下一行，而是有溢出y来滚动。问题是，最后两张图像落在下面而不是旁边。通过向下滚动底部图像来查看橙色div。

images-wrap绝对位于test-ar div中，以某种方式调整test-ar div的高度。我认为在相对div中放置一个绝对div不会调整相对div的大小，否则相对test-ar div将是完美的大小，并保持响应的1/6宽高比。

我试过，也许是错误的，设置空格没有换行，显示内联，溢出等等但无济于事。有任何想法吗？请不要弯曲！

这里的解释非常有用，谢谢！

＆＃13;

＆＃13;

#images-wrap {
  width: 100%;
  height: auto;
  margin-top: 25px;
  float: left;
  position: relative;

  position: static;
}
#main-image {
  width: 80.5%;
  float: left;
  background-size: cover !important;
  background-position: center center !important;
  height: auto;
  padding-bottom: 53.666%;

  width: 100%;
  padding-bottom: 66.666%;
}
#image-thumbs {
  width: 17.5%;
  height: auto;
  float: left;
  margin-left: 2%;
  overflow-y: auto !important;
  overflow-x: hidden;
  position: absolute;
  right: 0;
  height: 100%;

  width: 100%;
  margin-left: 0;
  position: absolute;
  height: auto;
  top: 0;
  left: 0;
}
.image-thumb {
  margin-bottom: 6px;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: auto;
  padding-bottom: 66.666%;

  width: 25%;
  padding-bottom: 16.666%;
  float: left;
}

#test-ar {
  float: left;
  width: 100%;
  height: auto;
  padding-bottom: 16.666%;
  background: orange;
  position: relative;
  overflow-x: scroll;
  /* overflow-y: hidden; */
}

＆＃13;

<div id="images-wrap">
  <div id="main-image" style="background-image: url(&quot;https://cml.sad.ukrd.com/image/572806.jpg&quot;);"></div>
  <div id='test-ar'>
    <div id="image-thumbs" style="overflow: hidden;">
      <div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/394545.jpg')"></div>
      <div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/572806.jpg')"></div>
      <div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
      <div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
      <div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
      <div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您将每个.image-thumb的宽度设置为其父级的25％。只让4个容器连续放入。

您可以使用width: calc(100% /6);或width: 16.66%;来修复布局。

希望这会有所帮助：）

＆＃13;

＆＃13;

#images-wrap {
  width: 100%;
  height: auto;
  margin-top: 25px;
  float: left;
  position: relative;

  position: static;
}
#main-image {
  width: 80.5%;
  float: left;
  background-size: cover !important;
  background-position: center center !important;
  height: auto;
  padding-bottom: 53.666%;

  width: 100%;
  padding-bottom: 66.666%;
}
#image-thumbs {
  width: 17.5%;
  height: auto;
  float: left;
  margin-left: 2%;
  overflow-y: auto !important;
  overflow-x: hidden;
  position: absolute;
  right: 0;
  height: 100%;

  width: 100%;
  margin-left: 0;
  position: absolute;
  height: auto;
  top: 0;
  left: 0;

}
.image-thumb {
  margin-bottom: 6px;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: auto;
  padding-bottom: 66.666%;

  width: calc(100% /6);
  padding-bottom: 16.666%;
  float: left;
}

#test-ar {
  float: left;
  width: 100%;
  height: auto;
  padding-bottom: 16.666%;
  background: orange;
  position: relative;
  overflow-x: scroll;
  /* overflow-y: hidden; */
}

＆＃13;

<div id="images-wrap">
  <div id="main-image" style="background-image: url(&quot;https://cml.sad.ukrd.com/image/572806.jpg&quot;);"></div>
  <div id='test-ar'>
    <div id="image-thumbs" style="overflow: hidden;">
      <div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/394545.jpg')"></div>
      <div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/572806.jpg')"></div>
      <div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
      <div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
      <div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
      <div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

解决这个问题的一种方法是使用flex之类的东西：

#image-thumbs {
  display: flex;
  width: 100%;
  height: 150px;
}
.image-thumb {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
}

仅更改了2个样式，删除了浮动和宽度，您应该使用高度达到所需的数量。

或使用花车：

#image-thumbs {
  background-color: red;
  width: 100%;
  height: 150px;
}
.image-thumb {
  width: 16.66666%;
  height: 100%;
  background-size: cover;
  background-position: center;
  float: left;  
}