gpt4 book ai didi

html - CSS:两个 Logo 左右对齐,应通过窗口调整大小自动缩放

转载 作者:太空宇宙 更新时间:2023-11-04 02:24:18 25 4
gpt4 key购买 nike

我的网站上有两个 Logo ,应该放在我的网站顶部。
一个 Logo 应对齐左侧,第二个 Logo 应对齐右侧。
现在,当浏览器窗口变小时,这两个 Logo 之间的空间应该变窄,最终当两个 Logo “碰撞”彼此时,两者都应该在不破坏线的情况下缩小。

现在只有左边的标志缩小了,右边的标志打破了界限,被推低了,根本没有缩小。

有谁能够帮我?

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

最佳答案

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

.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

关于html - CSS:两个 Logo 左右对齐,应通过窗口调整大小自动缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37579199/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com