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和title需要与左边对齐，img2需要与右边对齐，但是当我调整窗口大小时，img2会在标题下进行。

我需要他们全部留在一行。

任何人都能伸出援手吗？

提前致谢。

Answer 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（你的边缘顶部）
你可以通过在第二个div上指定一个“右”来获得更多的幻想。这有助于确保标题和第3个div / image不会重叠。
为了简洁起见，我保留了内联样式，但请将它们设为外部（通过类或ID）
如果可以的话，完全摆脱FONT标签。

Answer 2

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

Answer 3

尝试在包含div的顶部放置宽度或最小宽度的CSS属性，如：

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

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

Answer 5

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

<h1></h1>

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

Answer 6

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

Div，float和align，需要一些帮助

6 个答案: