css - 将两个图像放置在网页的上 Angular 而不重叠

Question

我需要将两张图片放在网页的左上角和右上角，它们之间的空白会占用可用空间，即如果显示页面的浏览器调整大小，两张图片将只要浏览器窗口宽度足以显示它们，就可以留在 Angular 落。如果随后将浏览器的大小调整为低于此宽度，则应出现一个水平滚动条。基本要求是两个图像不应该重叠，也不应该在彼此下方渲染。

为了说明我现在的位置，这里是一个精简的 HTML 片段:

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

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

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

Answer 1

你知道图片的大小吗？你也许可以做类似的事情......

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

我还没有测试过它，但在我的脑海中，类似的东西应该可以正常工作。