如何使父容器应并排包含所有子容器

Question

我正在尝试制作水平图像滑块。假设总共有 6 张图像，并且一次显示 3 张。因此，外部 div 的宽度应为 3 个图像的宽度，内部 div 的宽度应等于 6 个图像，以便可以使用 JavaScript 滚动，但内部 div 的大小仅等于外部 div。

.image_slider {
  width: 100%;
  position: relative;
  height: 500px;
  overflow: hidden;
}

.image_wrapper {
  position: absolute;
  height: 500px;
  display: inline;
}

.image_wrapper>img {
  width: 500px;
  height: 500px;
}

<div class="image_slider">
  <div class="image_wrapper">
    <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
    <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
    <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
    <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
    <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
    <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
  </div>
</div>

小提琴

Answer 1

您应该在

width:auto

上使用

max-width:100%

、

white-space:nowrap

和

.image_slider

。

.image_wrapper

应设置为

width:auto

和

position:absolute

    <style>
        .image_slider {
            white-space: nowrap;
            width: auto;
            max-width:100%;
            position: relative;
            height: 500px;
            overflow: hidden;
        }
        .image_wrapper{
            width:auto;
            position:absolute;
        }
        .image_wrapper > img {
            width: 500px;
            height: 500px;
        }
    </style>

    <div class="image_slider">
       <div class="image_wrapper">
        <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
        <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
        <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
        <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
        <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
        <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
       </div>
     </div>

Answer 2

您可以使用jquery动态计算img包装器的宽度并实现您想要的，如下所示

var width = 0;
$('img').each(function() {
  width += $(this).outerWidth();
});
$('.wrapper').width(width + 100);

div {
  overflow:hidden;
  background: red;
}
img {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="wrapper">
    <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
    <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
    <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
    <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
    <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
    <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
    <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
    <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
    <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
  </div>


</div>