Question

我有一个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甚至width:1px添加到了 {没有width:1px IE7至少不会使居中，甚至不会添加margin:0 auto，这可能是造成问题的原因。）

问题在于我希望图像显示在的左上角，文本从图像右侧开始，除了显式 之外没有任何换行符。如果我将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的宽度，以避免right div移动到left div以下，以防 之前的文字增长。

Answer 2

只需向左移动图像，即可摆脱其他所有内容。在JSFiddle

上查看

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

另一个JSFiddle solution，其中内容被保留在表单之外，以便在语义上更正确。

带有浮动图像的<p>中的控制线断开</p>

2 个答案: