«Конечный» элемент выравнивания в CSS

Question

«Конечный» элемент выравнивания в CSS

0

У меня есть проект, который должен правильно обрабатывать текст слева направо и справа налево. В дизайне некоторые элементы выравниваются по правому краю. Это означает, что для rtl они должны быть выровнены по левому краю.

Есть ли способ выровнять вещи с "концом", а не с "правильным" с помощью CSS? Я специально нацелен на Webkit.

Примеры того, что я хотел бы сделать:

float: end; /* instead of float: right */

или

position: absolute;
end: 0px; /* instead of right: 0px */

Очевидно, ни одна из них не работает.

Я знаю, что можно установить стиль для rtl и использовать его для изменения всех right: 0px; left: 0px. Я ищу лучшее решение здесь.

Редактировать:

В каком-то контексте на странице есть элементы во всем, что делает всевозможные вещи. Но тот, над которым я сейчас работаю, - это меню-бар. У него есть несколько статических кнопок слева, переменная пачка в середине и некоторые статические кнопки справа. Предполагается, что хлебная крошка должна течь, как обычно, текст (слева направо или справа налево, в зависимости от ситуации).

chowey 13 нояб. 2013, в 21:29

Источник

0

Можете ли вы предоставить больше контекста здесь? Может быть решение, но оно сильно зависит от окружающих элементов.
cimmanon 13 нояб. 2013, в 19:48
0

Этого должно быть возможно, если вы используете очень хорошо продуманную семантическую разметку и классы - таким образом вы можете изменять CSS, связанный с выравниванием, на лету для каждой страницы, но при этом иметь преимущество идентичной разметки. Например, .alignend класс .alignend или что-то, что плавает влево или вправо на основе более специфического переопределения стиля (например, если вы динамически добавляли классы rtl и ltr в body зависимости от того, какой это был тип страницы).
Ennui 13 нояб. 2013, в 19:52
0

потенциально вы можете использовать свойство justify-content для flexbox, которое принимает в качестве опций flex-start и flex-end.
jbenjohnson 13 нояб. 2013, в 19:58
0

Flexbox может быть путь.
chowey 13 нояб. 2013, в 20:03
0

Обратите внимание, что с недавнего времени вы можете использовать такие вещи, как float: inline-end и text-align:end которые делают то, что вы хотите.
Mr Lister 10 фев. 2018, в 21:46

Показать ещё 3 комментария

Теги:

html

css

right-to-left

webkit

3 ответа

Ещё вопросы

Можете ли вы предоставить больше контекста здесь? Может быть решение, но оно сильно зависит от окружающих элементов.
Этого должно быть возможно, если вы используете очень хорошо продуманную семантическую разметку и классы - таким образом вы можете изменять CSS, связанный с выравниванием, на лету для каждой страницы, но при этом иметь преимущество идентичной разметки. Например, .alignend класс .alignend или что-то, что плавает влево или вправо на основе более специфического переопределения стиля (например, если вы динамически добавляли классы rtl и ltr в body зависимости от того, какой это был тип страницы).
потенциально вы можете использовать свойство justify-content для flexbox, которое принимает в качестве опций flex-start и flex-end.
Обратите внимание, что с недавнего времени вы можете использовать такие вещи, как float: inline-end и text-align:end которые делают то, что вы хотите.

cimmanon · Answer 1 · 2013-11-13T19-23-00.000Z

Flexbox был разработан с более чем типичным способом записи в LTR. В нем есть язык, такой как flex-start и flex-end в отношении выравнивания и выравнивания. Как вы описываете элементы, о которых идет речь, может не понадобиться их использовать.

http://codepen.io/cimmanon/pen/bdynv (содержит примеры LTR и RTL)

<nav class="rtl">
  <img src="http://placekitten.com/100/50" alt="Cat Button" />
  <img src="http://placekitten.com/80/50" alt="Other Cat Button" />

  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>

  <img src="http://placekitten.com/100/50" alt="Cat Button" />
  <img src="http://placekitten.com/80/50" alt="Other Cat Button" />
</nav>

CSS:

nav {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  /* optional */
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

ul {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
ul li {
  display: inline-block;
}

.rtl {
  direction: rtl;
}

Обратите внимание, что то же самое можно было бы достичь, используя свойства отображения таблицы/таблицы, но для этого потребуются дополнительные элементы.

David Link · Answer 2 · 2013-11-13T18-22-00.000Z

Используя немного JavaScript (здесь, с jQuery), мы можем проверить направление текста и настроить float с именем класса и некоторым CSS.

Пример JSFiddle

JS:

$(".float-end").each(function(){
    if($(this).css("direction") === "rtl"){
      $(this).addClass("rtl");  
    }
})

CSS:

.float-end {
    float: right;
}
.float-end.rtl {
    float: left;
}

jsring · Answer 3 · 2013-11-13T18-39-00.000Z

Если вы не пробовали text-align:right я бы рекомендовал начать там. Текст должен быть в блочном элементе, таком как тег p или div, а width: XXXpx необходимо установить так, чтобы левые и правые края были там, где вы хотите.

text-align:right не так хорош, как text-align:end который работает как для rtl, так и для ltr.