Cross-browser CSS for left align and right align on the same line

问题

Cross-browser CSS that works to allow both left and right align of text on the same line?

Example (where each text quote should be aligned as far left or right as possible, respectively):

stuff on the right                                              stuff on the left

No float's answer's please.. unless there is a way to make the text not break out of the parent div/container in a multicolumn css page...

回答1:

With container tags:

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

With inline tags:

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

回答2:

float:left for the one on the left, and float:right for the one on the right. Or absolute/relative positioning. Pretty sure both work across the main browers.

回答3:

Let's assume this is the HTML code:

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

What you can do is use JQuery to find the highest div, then set the #left, #right divs with the highest div. Here's a sample code:

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

Or you can Google with "equal heights jquery" for other solutions.

回答4:

Without floats:

<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>

来源：https://stackoverflow.com/questions/3324694/cross-browser-css-for-left-align-and-right-align-on-the-same-line

标签

css

layout

cross-browser

text-alignment