div，浮动和对齐，需要一些帮助答案

【问题标题】：Divs, float and align, need some helpdiv，浮动和对齐，需要一些帮助
【发布时间】：2010-02-05 05:10:37
【问题描述】：

我有代码的噩梦，

 <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 会在标题下。

我需要它们都排成一行。

有人可以帮忙吗？

提前致谢。

【问题讨论】：

标签： html css

【解决方案1】：

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

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

与上述代码无关的事情：

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

【讨论】：

【解决方案2】：

尝试在最外层的 div 中添加最小宽度并溢出：隐藏

【讨论】：

【解决方案3】：

尝试在包含 div 的顶部放置一个 width 或 min-width CSS 属性，例如：

其中 300 被替换为图像的组合宽度。

【讨论】：

【解决方案4】：

你需要在最外层的容器上设置一个最小宽度，设置为允许的最小尺寸。

<div style="height:46px; min-width: 200px">
    <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>

【讨论】：

【解决方案5】：

将text-align:left放在最外层的div上，交换第二个和第三个内部div，然后去掉不必要的<div><font><b></b></font></div>怪物，用语义正确且短得多的<h1></h1>替换它：

<div style="height:46px;text-align:left">
    <div style="text-align:left;float:left;">
      <img alt="Document Logo" src="Images/img1.gif"></img>
    </div>
    <div style="text-align:right;float:right;vertical-align:top;">
        <img alt="Logo" src="Images/img.jpg"/>
    </div>
    <h1>title (will be aligned to the left, next to img1)</h1>
</div>

然后，您仍然可以根据需要对 h1 应用边距和填充。

【讨论】：

【解决方案6】：

您可以创建两个容器 div 并一左一右浮动

【讨论】：

这并没有提供问题的答案。要批评或要求作者澄清，请在其帖子下方发表评论。
这怎么不能提供答案？在徽标周围放置一个左浮动 div，在标题和 img2 周围放置一个右浮动 div（正如 OP 所指的那样），如果您还指定了宽度，则 img2 不会落在标题下。有很多方法可以做 OP 想要的事情，上面选择了一个很好的答案，但是在我提出这个建议的时候，这是一个完全有效的方法来做被问到的事情。仍然是。