Question

我的网站上有两个徽标，应该放在我的网站上。一个徽标应与左侧对齐，第二个徽标应与右侧对齐。现在，当浏览器窗口被推小时，这两个徽标之间的空间应该变得更窄，并且最终当两个徽标“＃34;击中＆＃34;相互之间，两者都应该在不破坏线的情况下缩小。

现在只有左侧徽标缩小，右侧徽标突破线条并被推低，完全不缩小。

有人能帮助我吗？

我的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 />

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

Answer 1

我已经将标记结构调整为正确嵌套元素。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

这是一个flex解决方案：

＆＃13;

.image-wrapper {
    max-width: 50%;
}

.scale-image {
    width: 100%;
    height: auto;
}

.flex-wrapper {
    display: flex;
    justify-content: space-between;
}

＆＃13;

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

＆＃13;

请注意，IE 8和9等传统浏览器不支持flex，而Safari和Firefox等Webkit浏览器的某些旧版本（不支持使用已弃用或混合的语法变体）。

了解详情： caniuse.com

CSS：左侧和右侧对齐的两个徽标，应通过窗口大小调整自动缩放

1 个答案: