CSS：两个徽标左右对齐，应按 window 调整大小自动缩放

Question

我的网站上有两个徽标，它们应该放在我网站的顶部。第一个徽标应左对齐，第二个徽标应右对齐。现在，当浏览器 window 变小时，这两个徽标之间的 space 应该变窄，最终当两个徽标 "hit" 相互时，两者都应该缩小而不破坏行。

现在只有左边的标志缩小了，右边的标志打破了线条，被压低了，根本没有缩小。

有人可以帮我吗？

我的CSS:

.image-wrapper
{
 position: relative;
 white-space: nowrap;
}

.scale-image
{
 display: block;
 width: auto;
 max-width: 55%;
 white-space: nowrap;

}

这是我的 HTML 代码：

<div class="image-wrapper">
<a href="#" ><img src="http://www.drogies-test.de/wp-content/uploads/2016/05/Logo_oskar.jpg" align="left" class="scale-image"/></a>
<div />

<div class="image-wrapper">
<a href="#" target="_blank" ><img src="http://www.drogies-test.de/pics/Logo_theater_os.gif" align="right" class="scale-image"/></a>
<div />

示例 link：http://www.drogies-test.de/header_show.html

Answer 1

我已调整标记结构以正确嵌套元素。

.image-wrapper:first-of-type,.image-wrapper:nth-child(1) {
    float: left;
}

.image-wrapper:last-of-type,.image-wrapper:nth-child(2) {
    float: right;
}

.image-wrapper {
    max-width: 50%;
}

.scale-image {
    width: 100%;
    height: auto;
}

<body>
  <div class="image-wrapper">
    <a href="http://www.drogies-test.de/"><img src="http://www.drogies-test.de/wp-content/uploads/2016/05/Logo_oskar.jpg" align="left" class="scale-image"></a>
  </div>
  <div class="image-wrapper">
    <a href="http://www.theater-osnabrueck.de/" target="_blank"><img src="http://www.drogies-test.de/pics/Logo_theater_os.gif" align="right" class="scale-image"></a>
   </div>
</body>

这是一个 flex 解决方案：

.image-wrapper {
    max-width: 50%;
}

.scale-image {
    width: 100%;
    height: auto;
}

.flex-wrapper {
    display: flex;
    justify-content: space-between;
}

<div class="flex-wrapper">
  <div class="image-wrapper">
    <a href="http://www.drogies-test.de/"><img src="http://www.drogies-test.de/wp-content/uploads/2016/05/Logo_oskar.jpg" align="left" class="scale-image"></a>
  </div>
  <div class="image-wrapper">
    <a href="http://www.theater-osnabrueck.de/" target="_blank"><img src="http://www.drogies-test.de/pics/Logo_theater_os.gif" align="right" class="scale-image"></a>
   </div>
</div>

请注意，IE 8 和 9 等旧版浏览器以及 Safari 和 Firefox 等一些较旧版本的 webkit 浏览器不支持 flex（改为支持已弃用或混合的语法变体）。

了解更多： caniuse.com

CSS：两个徽标左右对齐，应按 window 调整大小自动缩放

CSS: Two Logos aligned to the left and to the right which should autoscale by window resize

html

css

alignment

scale