Размещение элемента справа с помощью CSS

Я пытаюсь разместить элемент css в правой части заголовка, но не уверен, как это сделать. Я попытался использовать:

 position: Absolute; top: 20px; right 0px;

Это будет работать, но если вы отрегулируете браузер, текст будет двигаться вместе с ним.

Я создал JFiddle, который вы можете найти здесь:

http://jsfiddle.net/rKWXQ/

таким образом, вы можете увидеть, что я пытаюсь сделать. У меня есть текст внутри обернутого элемента div, который говорит, что звоните сейчас (555) 555-5555.

вот элемент заголовка, и внутри этого у меня есть элемент right_header.

    <div id="header">
        <span class="right_header">Call Now (555) 555-5555</span>
    </div>

вот мой заголовок CSS:

   /* Header */
   #header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
  .right_header{color: #fff; position: absolute; top: 70px; right: 0px}

может кто-нибудь, пожалуйста, скажите мне, как это сделать, пожалуйста?

обратите внимание, что на левой стороне будет логотип, который не будет загружаться в JFiddle!

спасибо!

9
css css3 html

4 ответов

вы можете легко просто float Это справа, не нужно relative или absolute позиционирование.

.right_header {
    color: #fff;
    float: right;
}

обновил jsFiddle - может потребоваться добавить некоторые padding/margins - такой.

12

как упоминал JoshC, используя float является одним из вариантов. Я думаю, что ваша ситуация предлагает другое решение.

необходимо указать position: relative на #header элемент для position: absolute на #right_header чтобы вступить в силу. как только вы установите это, вы можете свободно позиционировать вы хотите по отношению к #header

4

вы можете сделать это также, если вы хотите сделать с установки, попробуйте это, пожалуйста

 #header {margin: auto; position:relative; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}


.right_header{color: #fff; position: absolute; top: 0px; right: 0px}
2

ответ с использованием поплавков из JoshC будет работать нормально, однако, я думаю, что есть причина, по которой это не работает.

причина, по которой ваш код не работает, заключается в том, что абсолютное положение относительно которого имеет размеры 0x0.

" должно быть абсолютно положение, чтобы этот код работал.

#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}

изменить это...

#header {margin: auto; position: absolute; left: 0px; right: 0px; top 0px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
0