javascript - img 自动调整大小保持线

Question

我在同一个 div 中使用两个 img 时遇到问题。我需要让它们保持在一条线上，并在右侧触摸她时调整左侧图像的大小。

fiddler :http://jsfiddle.net/SZd3r/1/

<div class="wrapper">
    <header class="container relative">
        <a class="left logo"><img src="#" width="248" height="52" alt="" /></a>
        <a class="right" href="#"><img src="" /><img src="#" width="32" height="32" alt="" /></a>
        <div class="clear"></div>
    </header>
</div>

.wrapper {
    margin: 0 auto;
    width: 100%;
}
img {
    max-width: 100%;
}
.container {
    margin: 0 auto;
    min-width: 220px;
    max-width: 1024px;
}
.relative {
    position: relative;
}
.left {
    float: left;
}
.right {
    float: right;
}
.clear {
    clear: both;
}

调整导航器的大小以查看它。

我想要实现的是缩小图像，平滑地减小宽度，刚好达到最小宽度。自动。

Answer 1

为了使您的布局更加灵活，Flexbox 是一个可行的解决方案。

参见:http://css-tricks.com/snippets/css/a-guide-to-flexbox/

可在以下位置找到兼容性列表:http://caniuse.com/flexbox

要制作一个灵活的盒子使用几行代码，例如:

.flex {
    display: flex;
}

将此类添加到您的框中。在报道的资料中可以找到很多设置。

为获得最大兼容性，请使用 vendor 前缀。