html - float 两个包含彼此相邻的图像的 div 并自动缩放

Question

我已经尝试解决这个问题有一段时间了，但似乎无法让它发挥作用。基本上我想要两张相邻的图像，它们之间可能有 10-15 个像素。如果 imageContainer 的大小发生变化，图像应该缩小，但仍然彼此相邻。我已经在谷歌上搜索过这个问题，试图找到答案，但在这种情况下他们都不起作用。谁能帮我弄清楚我缺少什么。这是一个 fiddle http://jsfiddle.net/dcksh6wf/2/

.container {
    width: 100%;
}

.imageContainer {
    width: 5%;
    max-width: 12%;
}

.image {
    display: inline-block;
    float: left;
}

.image img {
    width: 100%;
    height: auto;
}

<div class="container">
    <div class="imageContainer">
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
    </div>
</div>

Answer 1

您必须将内联显示规则应用于 .image 而不是 .imageContainer。

.container {
    width: 100%;
}

.image {
    width: 5%;
    max-width: 12%;
    display: inline-block;
    float: left;
    margin-left: 10px;
}

.image img {
    width: 100%;
    height: auto;
}

.image:first-child {
    margin: 0;
}

<div class="container">
    <div class="imageContainer">
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
    </div>
</div>