HTML/CSS: как поместить текст как вправо, так и влево в соответствии с абзацем

Какой лучший код должен иметь два бита текста в одном абзаце, один выровненный по левому краю, другой выровненный по правому краю, который также есть:

  • максимально возможный код
  • самый простой для клиентов рендеринг (т.е. использование наименьших ресурсов)

Я добавляю этот последний, чтобы быть уверенным, что <table><tr><td></td><td align=right></td></tr></table> будет исключен. Мало того, что это зверь кода по сравнению с паролем правильно стилизованных <div>, <span> или <p>, это также зверь, если вы знаете, что движок визуализации HTML должен загружать и вычислять, чтобы принять решение о размеры ячеек, прежде чем он даже дойдет до рисования текста в них...

Если вы не знаете, что я имею в виду, вот пример: нижний колонтитул страницы с выровненным слева именем пользователя, который в настоящее время вошел в систему, и на той же строке выравнивает текущую дату и время и/или версию веб-сайта.

Ответы

Ответ 1

Минимальная возможная наценка (вам нужен только один промежуток):

<p>This text is left. <span>This text is right.</span></p>

Как вы хотите достичь левого/правого стилей, зависит от вас, но я бы порекомендовал внешний стиль для идентификатора или класса.

Полный HTML-код:

<p class="split-para">This text is left. <span>This text is right.</span></p>

И CSS:

.split-para      { display:block;margin:10px;}
.split-para span { display:block;float:right;width:50%;margin-left:10px;}

Ответ 2

Единственный способ сделать это на полпути -

<p>
  <span style="float: right">Text on the right</span>
  <span style="float: left">Text on the left</span>
</p>

Однако это приведет к возникновению проблем, если текст переполнится. Если вы можете, используйте div (элементы уровня блока) и дайте им фиксированный width.

Таблица (или число div с соответствующими свойствами display: table / table-row / table-cell) на самом деле будет самым безопасным решением для этого - невозможно будет сломаться, даже если у вас много сложного контента.

Ответ 3

Я бы не поставил его в ту же <p>, так как IMHO две информации семантически слишком разные. Если вам нужно, я бы предложил следующее:

<p style="text-align:right">
 <span style="float:left">I'll be on the left</span>
 I'll be on the right
</p>

Ответ 4

Я использовал это в прошлом:

HTML

January<span class="right">2014</span>

Css

.right {
    margin-left:100%;
}

Демонстрация

Ответ 5

enter image description here

Если тексты имеют разные размеры, и они должны быть подчеркнуты, это решение:

<table>
  <tr>
    <td class='left'>January</td>
    <td class='right'>2014</td>
  </tr>
</table>

CSS

table{
    width: 100%;
    border-bottom: 2px solid black;
    /*this is the size of the small text baseline over part  (≈25px*3/4)*/
    line-height: 19.5px; 
}
table td{
    vertical-align: baseline;
}
.left{
    font-family: Arial;
    font-size: 40px;
    text-align: left;

}
.right{
    font-size: 25px;
    text-align: right;
}

демо здесь

Ответ 6

Хорошо, то, что вы, вероятно, хотите, будет предоставлено вам в результате:

  1. в CSS:

    div {     количество столбцов: 2;   }

  2. в формате HTML:

    & lt; div> некоторый текст, бла бла бла & lt;/div>

В CSS вы делаете div, чтобы разделить абзац на столбец, вы можете сделать их 3, 4...

Если вы хотите иметь много разных параграфов, то добавьте id или class в ваш div: