Html:调整页面大小时图像将换行

Question

我正在 HTML 页面上制作标题，其中我有一个图像与页面左侧对齐，一个图像与右侧对齐。当我水平放大页面时，我希望中心背景颜色为白色，当我水平缩小页面时，中心白色部分最小化为无。然后右侧的图像应该随着页面缩小从右侧切掉。

我遇到的主要问题是，当我缩小页面时，右边的图像会低于左边的图像。我怎样才能解决这个问题？中间部分也不是白色的。

HTML:

<div class="navlogo">
    <div class="left">
        <img src="Weir-Logo.jpg">
    </div>
    <div class="right">
        <img src="compass.jpg" />
    </div>
</div>

CSS:

.navlogo {
width:100%;
background-color: white;
}

.navlogo .left {
float:left;       
}

.navlogo .right {
float:right;
}

Answer 1

我会同意 Turnip 的回答，但如果您喜欢表格，这里还有另一种选择:

<table style="width:100%;background-color:white">
    <tr>
        <td align="left">
            <img src="Weir-Logo.jpg">
        </td>
        <td></td>
        <td align="right">
            <img src="compass.jpg" />
        </td>
    </tr>
</table>