1

私は、この一見単純な問題に 10 年間悩まされてきました。（OK、毎日ではありません！）

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>

追加の質問: P を SPAN に置き換えると、さらに混乱します。なぜ P と SPAN の間にそんなに大きな違いがあるのですか?

4

2 に答える 2

0

divが左右に浮いているため、<p>要素は中央に配置され、何にも適合していません。それらは、左または右のdivのどちらにも配置されません。

実際、コードには基本的な一連の欠陥があります。そのため、それらすべてをリストし、動作を正しくするために修正することができます。

  1. 左側のdivとpを揃えたい場合は、それらを親のdivコンテナにラップすることを検討してください。
  2. p要素に高さを与えて、それらが互いに整列したままになるようにすることを検討してください。
  3. 両方の要素があるべき場所のfloatで親divのスタイルを設定します。
  4. HTML属性を引用符で囲むことを忘れないでください（つまり<div class="dl">、これは他の何よりもきちんと整理されています）。

とにかく、私はこのソリューションにたどり着きました。以前よりも少しうまく機能していますが、それでも完璧ではありません。左右の線を交互に並べるのではなく、同じ線上に左右の領域が必要な理由がわかりません。そのレイアウトはあまり美的ではない可能性があります。ここでそれをチェックしてください：http：//jsfiddle.net/z26JM/

于 2012-11-26T00:50:14.643 に答える
0

OK、解決策を見つけました: clear:left/right を DIV/IMG から取り出し、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 に答える