Кроссбраузерный CSS для выравнивания по левому и правому краю на одной строке - PullRequest
Новая
       35

Кроссбраузерный CSS для выравнивания по левому и правому краю на одной строке

2 голосов
/ 24 июля 2010

Кросс-браузерный CSS, который позволяет выравнивать текст по левой и правой сторонам по одной строке?

Пример (где каждая текстовая кавычка должна быть выровнена как можно дальше влево или вправо, соответственно): 

stuff on the right                                              stuff on the left
  • Нет ответа с плавающей точкой, пожалуйста .. если только нет способа заставить текст не вырваться из родительского div / контейнера на многостолбцовой css-странице ...

Ответы [ 4 ]

4 голосов
/ 24 июля 2010

с тегами контейнера: 

<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>
2 голосов
/ 24 июля 2010

float: слева для того, кто слева, и float: справа для того, кто справа. Или абсолютное / относительное позиционирование. Уверен, что оба работают через основные браузеры.

0 голосов
/ 25 сентября 2013

без поплавков: 

<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>
0 голосов
/ 25 июля 2010

Давайте предположим, что это 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 divs с самым высоким div. Вот пример кода: 

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

Или вы можете использовать Google с «jquery равной высоты» для других решений.

...