CSS как выровнять одно слово влево и другое слово вправо в пределах одного и того же div? - PullRequest
Новая
       9

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

14 голосов
/ 26 мая 2010

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

Ответы [ 5 ]

19 голосов
/ 26 мая 2010

Решение 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 голосов
/ 26 мая 2010

Вот что я бы сделал: 

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

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

2 голосов
/ 26 мая 2010 
<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>
1 голос
/ 16 октября 2017

Попробуйте это: 

.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>
0 голосов
/ 26 мая 2010

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...