html - Div、 float 和对齐，需要一些帮助

Question

我有代码的噩梦，

 <div style="height:46px;">
    <div style="text-align:left;float:left;">
      <img alt="Document Logo" src="Images/img1.gif"></img>
    </div>
    <div style="text-align:left;float:left;margin-top:5px;margin-left:13px;">
      <font size="4">
        <b>title (needs to be align to the left,next to img1)</b>
      </font>
    </div>
    <div style="text-align:right;float:right;vertical-align:top;">
      <img alt="Logo" src="Images/img.jpg"/>
    </div>
   </div>

img1 和标题需要左对齐，img2 需要右对齐，但是当我调整窗口大小时，img2 会在标题下方。

我需要它们全部保持在一行中。

有人可以帮忙吗？

提前致谢。

Answer 1

另一种解决方案是使用绝对定位而不是 float 。像这样:

<div style="position:relative; height:46px;">
    <div style="position:absolute; top:0; left:0; width:50px">
        <img alt="Document Logo" src="Images/img1.gif" width="50"></img>
    </div>
    <div style="position:absolute; top:5px; left:63px;">
        <font size="4">
        <b>title (needs to be align to the left,next to img1)</b>
        </font>
    </div>
    <div style="position:absolute; top:0; right:0;">
        <img alt="Logo" src="Images/img.jpg"/>
    </div>
</div>

关于上述代码的事情:

1. 确保第一个 div 的宽度与其中的图像大小相同。
2. 第二个 div 的“左边”应该是:第一个 div 的宽度 + 13(你的 margin-left)
3. 第二个 div 的顶部为 5(您的 margin-top)
4. 您可以通过在第二个 div 上指定“右”来获得更多花样。这将有助于确保标题和第 3 个 div/图像永远不会重叠。
5. 为简洁起见，我保留了内联样式，但请将它们设为外部样式(通过类或 ID)
6. 如果可以的话，完全去掉 FONT 标签。