Css 将两个图像放置在网页的上角，不重叠

我需要将两个图像放置在网页的左上角和右上角，两个图像之间有一个空的空间，这将占用可用空间，即，如果显示页面的浏览器调整了大小，则只要浏览器窗口宽度足以同时显示这两个图像，这两个图像就会停留在角落。如果浏览器的大小调整到低于此宽度，则应显示一个水平滚动条。基本要求是两个图像不应重叠，也不应在彼此下方渲染

为了说明我现在的处境，下面是一个精简的HTML片段：

<div class="header">
    <img src="left.png">
    <img style="float: right;" src="right.png">
</div>

这足以将图像放置在正确的位置，但不幸的是，如果调整浏览器窗口的大小，使其宽度低于两个图像的宽度之和，则图像将显示在彼此下方

---

当然，基于CSS的解决方案更可取；如果可能的话，我会避免使用

元素。

您可以使用一些HTML标记，如：

    <div class = "header">
        <div class = "leftimage"><img src="left.png"></div>
        <div class = "centerspace"></div>
        <div class = "rightimage"><img src="right.png"></div>
    </div>

然后将以下类用于样式：

<style>
.leftimage{
float:left;
}
.centerspace{
float:left;
}
.rightimage{
float:right;
}
</style>

.leftimage{
浮动：左；
}
.centerspace{
浮动：左；
}
.rightimage{
浮动：对；
}

您知道图像的大小吗？你也许可以做一些像

<div class="header">
    <img id="left">
    <img id="right">
</div>

#header
{
    position:relative;
    min-width: 200px;
}

#left
{
    position:absolute;
    width: 100px;
    top: 0;
    left: 0;
}

#right
{
    position:absolute;
    width: 100px;    
    top: 0;
    right: 0;
}

#标题
{
位置：相对位置；
最小宽度：200px；
}
#左
{
位置：绝对位置；
宽度：100px；
排名：0；
左：0；
}
#对
{
位置：绝对位置；
宽度：100px；
排名：0；
右：0；
}

---

我还没有测试过它，但在我的脑海里，像这样的东西应该可以正常工作。

没有解释就对答案降级是没有用的。请指出问题所在。非常感谢，凯文，你的解决方案非常有效。我只是稍微喜欢另一种解决方案（见上文），但您的解决方案也非常优雅。（顺便说一句，不是我否决了你的答案…）好吧，很公平。谢谢你的反馈，很抱歉打断了你对降级的评论！