Question

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

为了说明我现在的位置，这里有一个精简的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;
}

我还没有对它进行过测试，但是在我脑海中这样的东西应该可以正常工作。

Answer 2

你可以使用一些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>

将两个图像放入网页的顶角而不重叠

2 个答案: