Html 带浮动图像的

中的控制线中断 我有一个JS函数，它可以编写HTML表单的代码，应该可以在IE7及以上版本中使用。以编程方式创建的HTML的一部分如下所示：

<form name="choice" style="text-align:center">
  <p style="display:inline-block;margin-left:24px;margin-top:0px;margin-bottom:0px;margin-right:24px;text-align:left;white-space:nowrap;width:1px">
    <img src="..." style="margin-right:12px">
    Text line number 1<br>
    Text line number 2<br>
    Text line number 3<br>
    Text line number 4<br>
    Text line number 5<br>
    Text line number 6
  </p>

(....some input buttons....)

</form>

…其中文本行的数量和长度以及图像的大小是可变的。我想让的内容在表单中左对齐并居中，所以我在的样式中添加了display:inline block、text align:left and even width:1px，但没有宽度：1px IE7至少没有居中，甚至没有添加margin:0 auto，这很可能是问题的原因

问题是，我希望图像显示在的左上角，文本从图像的右侧开始，除了显式的外，没有任何换行符。如果我将float:left添加到图像样式中，或者如果我没有添加，并且第一行文本很长，则文本将从图像下方开始，而不是从图像右侧开始，这很难看。如果我添加display:inline，我会避免在文本开始之前换行，但在图像右侧只有一行文本，第二行仍然在其下方，如果图像具有一定高度，这也很难看

是否有办法将图像向左浮动，并强制文本占据图像右侧的可用空间？

尝试以下方法：

<p>
  <div style="float:left; width:YOUR_WIDTH_1"><img src="" /></div>
  <div style="float:right; width:YOUR_WIDTH_2">
    Text line number 1<br>
    Text line number 2<br>
    Text line number 3<br>
    Text line number 4<br>
    Text line number 5<br>
    Text line number 6
  </div>
</p>

如果需要，可以定义两个div的宽度。不需要使用内联或其他CSS。它会解决你的目的

---

编辑：您需要定义div的宽度，以避免右div在文本增长之前移动到左divin case的下方。

只需将图像向左浮动，并清除其中的所有其他内容。看这上面

另一种方法是将内容隐藏在形式之外，以便在语义上更加正确

#icon {
    float: left;
    width: 50px;
    height: 50px;
    margin: 0 0.5em 0.5em 0;
}

<form name="myform" method="POST" action="validate.php">
    <img id="icon" src="icon.png" />
    Text line number 1<br/>
    Text line number 2<br/>
    Text line number 3<br/>
    Text line number 4<br/>
    <input type="submit" name="btnSubmit" value="Submit">
</form>