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

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

HTML

---

您应该在

上使用
宽度：自动
，
最大宽度：100%
和
空白：nowrap
。图像滑动条

.image\u wrapper

应设置为

宽度：自动

和

位置：绝对

    <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>

.image\u滑块{
空白：nowrap；
宽度：自动；
最大宽度：100%；
位置：相对位置；
高度：500px；
溢出：隐藏；
}
.image\u包装器{
宽度：自动；
位置：绝对位置；
}
.image\u wrapper>img{
宽度：500px；
高度：500px；
}

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

var宽度=0；
$（'img'）。每个（函数（）{
宽度+=$（this）.outerWidth（）；
});
$（'.wrapper'）。宽度（宽度+100）
div{
溢出：隐藏；
背景：红色；
}
img{
宽度：100px；
}

您能创建一个提琴吗：图像仍然不能在线使用，并且可以看到一个滚动条。我不想要滚动条。我想在事件上滚动（左箭头和右箭头）@Amit抱歉，我不知道你不想要滚动条。我刚刚更新了答案。看看这是否有效。您的解决方案帮助在线显示图像。但我还不能使用javascript滚动。所以我添加了。宽度：auto和位置：absolute的image_包装器现在可以正常工作了。谢谢你的帮助：）@Amit好的，更新了答案以备将来参考：）
.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;
}

    <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>