Плавающий один текст слева, другой справа

0

Я пытаюсь поместить один тег p влево, другой p тэг вправо. Они имеют один и тот же div, что и родитель. Я не могу этого добиться. Правильный текст позиционируется правильно горизонтально, но вертикально он находится под левым текстом. Вот код:

<div>
    <p id="t1">Text1</p>
    <p id="t2">Text2</p>
</div>

div {
    border: 1px solid red;
}
#t1 {
    border: 1px solid green;
    display: inline;
}
#t2 {
    border: 1px solid blue;
    display: inline;
    float: right;
}

Это результат, который я получаю: http://jsfiddle.net/JJB2s/ Теперь, если я попытаюсь поместить текст t1 влево, они оба находятся на одном и том же вертикальном уровне, но они кажутся намного ниже, чем они должны быть. Я не совсем понимаю, почему это происходит и как это исправить, может кто-нибудь объяснить это мне, пожалуйста? Заранее спасибо!

  • 0
    вот обновление вашей скрипки .. jsfiddle.net/JJB2s/12
  • 0
    Просто удалите display: inline из css обоих div и добавьте float: left или Float: right в # t1.Вы получите правильное поведение.
Теги:
css-float
text

5 ответов

1
Лучший ответ

Я бы использовал это с помощью float. Прямо сейчас у вас нет обоих плавающих, и они пытаются использовать встроенный дисплей, чтобы заставить их выстраиваться в линию. Здесь обновленная скрипка, которая исправляет это:

http://jsfiddle.net/JJB2s/13/

CSS воспроизводится ниже:

div {
    border: 1px solid red;
    overflow: hidden;
}

#t1 {
    border: 1px solid green;
    float: left;
}

#t2 {
    border: 1px solid blue;
    float: right;
}

Обратите внимание, что overflow: hidden в контейнере не позволяет свернуть его, поскольку оно содержит поплавки. Этот же эффект может быть достигнут с помощью clearfix, если вы действительно не хотите, чтобы переполнение было скрыто

Поделиться
  • 0
    Приятно! Почему это на самом деле плавает их с таким большим запасом? Почему они не касаются верхней части div?
  • 0
    Это связано с тем, что теги абзаца поставляются с полями из таблицы стилей агента пользователя. Вы можете сбросить их, если хотите так: jsfiddle.net/JJB2s/14
Показать ещё 1 комментарий
0

Мне понравился ответ Джеффа Эскаланте (я также поддержал его), но вот другое решение с таким же эффектом. это просто для того, чтобы показать другой подход. Используйте его ответ.

Вот рабочая скрипка

div {
    border: 1px solid red;
}
div:after
{
    content: '';
    clear: both;
    display: block;
}
#t1 {
    border: 1px solid green;
    float: left;
}
#t2 {
    border: 1px solid blue;
    float: right;
}
Поделиться
0

Установите маржу и отступы на 0; http://jsfiddle.net/JJB2s/15/

div, #t1, #t2{
margin:0px;
padding:0px;
}
div {
    border: 1px solid red;
}
#t1 {
    border: 1px solid green;
    display: inline;
    float:left;
}
#t2 {
    border: 1px solid blue;
    display: inline;
    float: right;
}
Поделиться
0

Он делает это, потому что есть два абзаца. По умолчанию HTML отображает каждый абзац в новой строке.. и да, измените это, установив margin-top: 0px;

Поделиться
0

Добавить margin-top: 0px; направо

как это

#t2 {
border: 1px solid blue;
display: inline;
margin-top:0px;
float: right;
}
Поделиться
  • 0
    Это, кажется, делает трюк довольно хорошо, однако разница между ними все еще составляет 1-2 пикселя. Почему это?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню