css - 左对齐和右对齐的跨浏览器 CSS 在同一行

Question

允许在同一行上左右对齐文本的跨浏览器 CSS？

示例（每个文本引用应分别尽可能向左或向右对齐）：

stuff on the right                                              stuff on the left

• 请不要浮动的答案..除非有办法使文本不会在多列css页面中脱离父div/容器...

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

没有浮动：

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

Answer 4

假设这是 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、#right div 设置为最高的div。这是一个示例代码：

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

或者你可以用“equal heights jquery”谷歌搜索其他解决方案。