Question

我有这个看似简单的问题，唠叨了我好十年。（好的，不是每天都有！）

它在IE中运行良好，但在FF和Chrome中没有，这通常表明代码有问题...... 我想在两侧都有DIV盒子（它们实际上是各种尺寸的IMG，因此不要继续使用表格），文本对齐。在各种窗口宽度处尝试此示例。在FF中，第3行显示前面的DIV。为什么？

基本上这个想法是DIV应该沿窗口的每一边堆叠，文本在中间。如果文本太多，下一个div就会被推倒。在IE中正常工作。

<HTML>
<HEAD>
<TITLE>Align test</TITLE>
<STYLE TYPE="text/css">
  .DL { float:left;  clear:left;  width:10em; height:10em; background:red;   margin:2; display:inline; }
  .DR { float:right; clear:right; width:10em; height:10em; background:green; margin:2; display:inline; }
  .PL { text-align:left;  background:#F0E0E0;  }
  .PR { text-align:right; background:#E0F0E0;  }
</STYLE>
</HEAD>
<BODY>
<DIV CLASS=DL></DIV><P CLASS=PL>This is the 1st line.</P>
<DIV CLASS=DR></DIV><P CLASS=PR>This is the 2nd line.</P>
<DIV CLASS=DL></DIV><P CLASS=PL>This is the 3rd line which should align with the 2nd red square (*)</P>
<DIV CLASS=DR></DIV><P CLASS=PR>This is the 4th line which should align with the 2nd green square.</P>

<P>(*) No, I don't want a clear:right in here. And adding a float:left works fine if the text is short, but moves the right image down if it reaches it, and it moves the whole line down below the left image if it reaches the right border. Which I don't want.</P>
</BODY>
</HTML>

补充问题：如果我用SPAN替换P，那就更加混乱了。为什么P和SPAN之间有这么大的差异？

Answer 1

由于你的div左右浮动，元素位于中间，不符合任何要求。它们与左侧或右侧div都没有对齐。

一般来说代码中存在一系列基本缺陷，所以我会将它们全部列出来，我们可以纠正它们以使行为正确：

如果你想保持左边的div和p对齐，那么考虑将它们包装在父div容器中。
考虑给p元素一个高度，以确保它们保持彼此对齐。
使用两个元素所在的浮点样式设置父div。
不要忘记将HTML属性包装在引号中（例如<div class="dl"> - 这比其他任何东西都更干净整洁。）

无论如何，我得到了这个解决方案，它比以前工作得更好，但它仍然不完美。我不确定为什么你会想要在同一条线上的左右区域而不是在左右之间交替线。这种布局不太可能非常美观。请在此处查看：http://jsfiddle.net/z26JM/

Answer 2

好的，我找到了解决办法：明确：左/右离开DIV / IMG并将其放在DIV之前的P中。像这样：  <IMG STYLE="float:left;"> ... 然后另一边：  <IMG STYLE="float:right;"> ... 重复......

交替DIV和P垂直对齐

2 个答案: