html - 带有 float 图像的 中的控制换行符

Question

我有一个编写 HTML 表单代码的 JS 函数，它应该在 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>

...其中文本行的数量和长度以及图像的大小是可变的。我想要 <p> 的内容在表单中左对齐并居中，所以我添加了 display:inline-block , text-align:left甚至width:1px <p>的风格(没有 width:1px IE7 至少不会将 <p> 居中，甚至不添加 margin:0 auto ，这很可能是问题的原因)。

问题是我希望图像出现在 <p> 的左上角, 以及从图像右侧开始的文本，除了明确的 <br> 外没有任何换行符的。如果我添加 float:left图像的样式，或者如果我不这样做并且第一行文本相当长，文本将从图像下方开始而不是图像右侧，这很丑陋。如果我添加 display:inline我避免了文本开始前的换行符，但是图像右侧只有一行文本，第二行仍然在它下面，如果图像有一定的高度，这也是丑。

有没有办法让图像向左浮动并强制文本占据其右侧的可用空间？

Answer 1

试试这个:

<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的宽度秒。无需使用 inline或其他 CSS。它将解决您的目的

编辑:您需要定义 div 的宽度s，避免right div移动到 left div 下面如果您的文字在 <br> 之前成长。