1

这个看似简单的问题困扰了我整整 10 年。（好吧，不是每天！）

它在 IE 中可以正常工作，但在 FF 和 Chrome 中却不行，这通常表明代码有问题......我想在两边都有 DIV 框（它们实际上是各种大小的 IMG，所以不要t 继续使用表格），文本对齐。在不同的窗口宽度下尝试这个例子。在 FF 中，第 3 行显示 ABOVE ABOVE 前面的 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 之间有这么大的区别？

4

2 回答 2

0

由于您的 div 左右浮动，因此<p>元素位于中间不符合任何内容。它们既不与左侧 div 也不与右侧 div 对齐。

通常代码中实际上存在一系列基本缺陷，所以我将它们全部列出，我们可以纠正它们以使行为正确：

  1. 如果您想保持左 div 和 p 对齐，请考虑将它们包装在父 div 容器中。
  2. 考虑给 p 元素一个高度，以确保它们彼此保持对齐。
  3. 使用浮动两个元素应该在哪里设置父 div。
  4. 不要忘记将您的 HTML 属性用引号括起来（即<div class="dl">- 这比其他任何东西都更整洁）。

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

于 2012-11-26T00:50:14.643 回答
0

好的，我找到了解决方案：从 DIV/IMG 中取出 clear:left/right 并将其放在 DIV 之前的 P 中。像这样： <P STYLE="clear:left;"></P> <IMG STYLE="float:left;"> <P STYLE="text-align:left;">...</P> 然后另一边： <P STYLE="clear:right;"></P> <IMG STYLE="float:right;"> <P STYLE="text-align:right;">...</P> 重复......

于 2012-11-27T13:18:12.707 回答