Question

我有一个div而不是跨越页面的整个宽度。然后在其中我有两个图像，一个总是50x50像素，然后另一个是400x90。较小的图像浮动到右侧，较大的图像保留在左侧。

除非我将窗口调整为小于两个图像的宽度，否则我知道它的用法。当发生这种情况时，我希望缩小图像，以填充剩余的宽度。现在，它保持当前的宽度并在较小的图像下面跳跃。

最简单的缩小方法是什么？

这是一个小提琴来说明我遇到的问题：https://jsfiddle.net/zdaujbaL/

这是我的代码：

HTML

<div class="clearfix">
<a class="button">
    <img src="//placehold.it/50x50">
</a>
<a class="logo">
    <img src="//placehold.it/400x90">
</a>
</div>

CSS

div {
background-color: lightblue;
padding: 5px;
margin: 5px;
}

a.button {
float: right;
}

a.logo {
display: inline-block;
}

a.logo img {
width: 100%;
}

Answer 1

您应该将非浮动元素设置为块级别并添加overflow:auto

a.logo {
    display: block;
    overflow: auto;
}
a.logo img {
    max-width: 100%;
}

JSFiddle： https://jsfiddle.net/zdaujbaL/5/

或者，您可以使用CSS table + table-cell布局。

div {
    background-color: lightblue;
    display: table;
    width: 100%;
    padding: 5px;
}
a.button, a.logo {
    display: table-cell;
    vertical-align: top;
}
a.logo {
    width: 100%;
}
a.logo img {
    max-width: 100%;
}

（您需要先更新订单 - logo首先加上button秒标记

JSFiddle： https://jsfiddle.net/zdaujbaL/6/

由相邻元素

1 个答案: