css - 同じ行で左揃えと右揃えのクロスブラウザCSS

Question

同じ行のテキストの左右両方の整列を可能にするように機能するクロスブラウザCSS？

例（各テキストの引用符は、それぞれ可能な限り左または右に揃える必要があります）：

stuff on the right                                              stuff on the left

• フロートの答えはありません。複数列のcssページでテキストが親のdiv/containerから抜け出さないようにする方法がない限り...

Answer 1

コンテナタグ付き：

<div>
  <p style="float: left">stuff on the left</p>
  <p style="float: right">Tstuff on the right </p>
</div>

インラインタグ付き：

<div>
  <span style="float: left">stuff on the left</span>
  <span style="float: right">Tstuff on the right</span>
</div>

Answer 2

float：leftは左側、float：rightは右側です。または絶対/相対ポジショニング。どちらもメインのブラウザで機能することを確認してください。

Answer 3

これがHTMLコードであると仮定しましょう：

<div>
  <div id="left" style="float: left">stuff on the left</div>
  <div id="right" style="float: right">Tstuff on the right </div>
</div>

あなたができることは、JQueryを使用して最も高いdivを見つけ、次に＃left、＃rightdivを最も高いdivに設定することです。サンプルコードは次のとおりです。

if ($('#left').height()<$('#right').height()) {
  $('#left').height($('#right').height());
} else {
  $('#right').height($('#left').height());
}

または、他のソリューションについては、「等しい高さのjquery」を使用してGoogleで検索できます。

Answer 4

フロートなし：

<div class=container style='width: 100%;'>
  <div class=left-side style='display: inline-block; width: 50%'>
    Stuff on the left
  </div>
  <div class=right-side style='display: inline-block; width: 50%; text-align: right'>
    Stuff on the right
  </div>
</div>