1

2つのテキストブロックを<div>含む要素があります。1つのブロックが要素の中央に配置され、2番目のブロックが右側に配置されます。

私がこれを行おうとしているページはここで見ることができます。

<div>テキストの2番目のブロックをフローティングして適用して、フッターに内部要素を作成してみましたfloat: right。このソリューションの問題は、テキストの最初の（中央に配置された）テキスト要素が、<div>含まれている要素の中央に配置されるのではなく、残りのスペースの中央からフロートの幅を引いた位置に配置されることです。

これが私が試したコードです：

<div id="footer">
      <div id="Valid">
          Valid <a href="http://validator.w3.org/check/referer">HTML</a>
          and <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>
      </div>
  <div id="modified">
         Last modified ...
      </div>
</div>

2つのテキストブロックを希望の位置に表示するにはどうすればよいですか？

編集：私はhttp://jsfiddle.net/の例を設定しています（提案されたSSCCEは現在ダウンしているようです）

これが例ですhttp://jsfiddle.net/vjmVc/私も2つのネストされたdiv要素で試しましたが成功しませんでした

4

3 に答える 3

1

表示：インライン; フロート：右; n div内の要素ですが、この方法では、テキストの順序を逆にする必要があります。

于 2012-10-21T15:21:38.147 に答える
1

スペースを占有することの正しい部分を防ぎたい場合は、それを配置することができますabsolute。その場合に覚えておく必要があるのは、コンテナ要素（フッター）の位置をhttp://jsfiddle.net/vjmVc/1/relativeに設定することだけです。

また、画面が小さい場合、このソリューションを使用すると、ある時点で2つの要素が重なる可能性があることにも注意してください。

于 2012-10-21T15:58:37.737 に答える
-1

まず、適切なDOCTYPEを追加します。ページがクァークズモードで読み込まれています。

<!DOCTYPE html>

または

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

テキストについて

#footer
{
text-align: right;
}

アライメント用

#all
{
margin: 0 auto;
}

編集

#footer
{
position: relative;
}

#modified
{
position: absolute;
top: 0;
right: 0;
}
于 2012-10-21T15:22:45.737 に答える