CSS, как выровнять одно слово слева и другое слово прямо внутри одного div?

Как выровнять одно слово слева и другое слово в пределах одного и того же div?

Ответ 1

Решение 1:

HTML:

<div>
    <div class="left">left text</div>
    <div class="right">right text</div>
</div>

CSS

.left {
    float: left;
}
.right {
    float: right;
}

Решение 2:

HTML:

<div>
    <div class="left">left text</div><!-- no space here
 --><div class="right">right text</div>
</div>

CSS

.left {
    text-align: left;
}
.right {
    text-align: right;
}
.left, .right {
    display: inline-block;
    width: 50%;
}

Ответ 2

<html>
<head>
<style type="text/css">
  div span.left, div span.right { display:  inline-block; width: 50%; }

  span.left { float: left; }

  span.right {float: right; text-align: right; }
</style>
</head>
<body>
  <div>
    <span class=left>Left Text</span>
    <span class=right>Right Text</span>
  </div>
</body>

Ответ 3

Вот что я буду делать:

    .left {
        text-align: left;
        float: left;
        clear: none;
        width: 50%;
    }
    .right {
        text-align: right;
        float: right;
        clear: none;
        width: 50%;
    }


<div>
    <div class="right">right text</div>
    <div class="left">left text</div>
</div>

И не забудьте поставить тот, который появляется справа FIRST в разметке, как указано выше.

Ответ 4

Без изменения html, как показано выше, вы можете использовать псевдоселектора, те, которые ограничены первой строкой, первым ребенком и т.д. http://www.w3.org/TR/CSS2/selector.html#pseudo-element-selectors.

Кроме того, вам нужно будет использовать javascript для применения форматирования к тексту после его рендеринга. Взгляните на эту запись.

CSS для увеличения размера первого слова

Ответ 5

Попробуйте следующее:

.left {
      float: left;
}
.right {
       float:right;
}

<html>
<head>
</head>
<body>
<div class="left">
<p>Lorem ipsum dolor.</p>
</div>
<div class="right">
<p>Lorem ipsum dolor</p>
</div>
</body>
</html>