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

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

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

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

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

http://jsfiddle.net/rKWXQ/

Таким образом, вы можете увидеть, что я пытаюсь сделать. У меня есть текст внутри обернутого элемента div с надписью Call Now (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!

Спасибо!

10 голосов | спросил Frank G. 9 +04002013-10-09T09:01:14+04:00312013bEurope/MoscowWed, 09 Oct 2013 09:01:14 +0400 2013, 09:01:14

2 ответа


0

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

 #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}
ответил Dinesh Kanivu 9 +04002013-10-09T09:57:36+04:00312013bEurope/MoscowWed, 09 Oct 2013 09:57:36 +0400 2013, 09:57:36
0

Ответ с использованием чисел с плавающей точкой от 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;}
ответил contehhh 9 +04002013-10-09T09:11:56+04:00312013bEurope/MoscowWed, 09 Oct 2013 09:11:56 +0400 2013, 09:11:56

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132