Как выровнять текст по правому с помощью CSS, когда в DIV с элементами блока

Я желаю, чтобы произвести следующую структуру внутри DIV заголовка на моей странице, с помощью CSS толькоКак выровнять текст по правому с помощью CSS, когда в DIV с элементами блока

 
+-----------+ 
+   + 
+ Image + Title text       Some text aligned on the right 
+   + 
+-----------+

У меня возникли проблемы с выравниванием текст справа. Он продолжает немедленно совместив вправо и одну строку ниже текст заголовка, как этот

 
+-----------+ 
+   + 
+ Image + Title text       
+   +   Some text aligned on the right 
+-----------+

Это моя текущая разметка.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html> 
    <head> 
     <style type="text/css"> 
     #header, #footer { padding: 0.3em 0; border-bottom: 1px solid; } 
     #header img { display: inline;} 
     #header h1 { display: inline; margin: 0px; padding: 0px; 
         vertical-align: 50%; position: left;} 
     #login-status { margin: 0px; padding: 0px; 
         display: inline;text-align: right; position: right;} 
     </style> 

     <title>Models</title>    
     </head> 
     <body> 
     <div id="header"> 
      <img alt="Logo" height="110" width="276" 
      src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="276" /> 
      <h1>Models</h1> 
      <p id="login-status">You are currently logged in as steve</p> 
     </div> <!-- end of header --> 
     </body> 
    </html>

Я ожидал, что встроенный стиль, чтобы не вызвать разрыв строки после элемента h1, но это не так. Может ли кто-нибудь предположить, что я делаю неправильно?

источник

2009-03-28 Steve Weet

#header, #footer { padding: 0.3em 0; border-bottom: 1px solid; overflow: hidden; zoom: 1; } 
    #header img { float: left;} 
    #header h1 { float: left; margin: 0px; padding: 0px; } 
    #login-status { margin: 0px; padding: 0px; float: right; }

Нет необходимости в дополнительных div вокруг элементов или очищающего div при плавании. Я использую вышеупомянутую технику регулярно, чтобы сделать именно то, что вы пытаетесь сделать. переполнение: скрытый; делает заголовок очистить поплавки, но если нет указанной ширины, вам потребуется увеличить: 1; для IE6. zoom не проверяет, но он работает безупречно, и вы можете добавить его в файл css ie6 только в случае необходимости.

источник

2009-03-28 13:59:30

Спасибо, Джастин, отлично работает. Я пришел к другому решению, используя абсолютное позиционирование справа, но работы для меня. –

Это приятное изящное решение Justin ... и он удовлетворяет желание Стива использовать меньшую отметку. Мне это нравится!!! –

Замечательный. Я не знал, что 'overflow: hidden' будет расширять элемент до содержащихся в нем поплавок. Действительно ли 'float: left' действительно требуется на' img' и 'h1'? Похоже, это не так. –

Использование «float: right;»

источник

2009-03-28 12:28:04 Albert

Я пробовал, но затем делает за пределами DIV и после него. –

img float: left; title text float: left; some text float: right;

источник

2009-03-28 12:34:42

Вы, скорее всего, придется сделать что-то вроде этого ...

<head> 
    <style type="text/css"> 
     #header, #footer 
     { 
      padding: 0.3em 0; 
      border-bottom: 1px solid; 
     } 
     #login-status 
     { 
      margin: 0px; 
      padding: 0px; 
      line-height: 110px; 
      vertical-align: middle; 
     } 
    </style> 
    <title>Models</title> 
</head> 
<body> 
    <div id="header"> 
     <div style="float: left"> 
      <img alt="Logo" src="http://www.google.co.uk/intl/en_uk/images/logo.gif" style="width: 276px; 
       height: 110px" /> 
     </div> 
     <div style="float: left; margin: 0px 8px 0px 8px; 
      line-height: 110px; vertical-align: middle;"> 
      <h1>Models</h1> 
     </div> 
     <div id="login-status" style="float: right;"> 
      You are currently logged in as steve 
     </div> 
     <div style="clear: both"> 
     </div> 
    </div> 
    <!-- end of header --> 
</body>

«Очистить» необходимо будет где-то для того, чтобы очистить ваш плавающий, но он может быть применен к другим DIV который будет следовать за вашим заголовком вместо того, чтобы быть включенным в заголовок.

Примечание ... Я немного изменил это, чтобы текстовые области, расположенные справа от изображения, были выровнены по вертикали «посередине». Вы можете изменить стиль, основанный на CSS, но это должно обеспечить то, что вы искали.

источник

2009-03-28 12:37:23

+1 Спасибо. Это, безусловно, будет работать. Я пытаюсь избежать дополнительной разметки, если я могу ее избежать. –

Спасибо Стив, рад, что мое предложение помогло ... удачи в вашем проекте !!! –

Я играл с этим немного больше, так как css, использующий масштабирование и не-размерные поплавки, как неудачная проверка. Мне также не понравилось, что статус входа отображается вертикально по центру.

Окончательное решение, которое я прибыл в (с большим списывание из Bryan) выглядит следующим образом: -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
     <style type="text/css"> 
     #header, 
     #footer  { padding: 0.3em 0; border-bottom: 1px solid; 
         height: 110px; } 
     #header img { margin: 0px; padding: 0px; display: inline; } 
     #header h1 { line-height: 110px; vertical-align: middle; 
         display: inline; position: absolute; left: 300px; 
         margin: 0px; } 
     #login_status { font-size: 14px; margin: 0px; position: absolute; 
         top: 100px; right: 10px; display: inline; 
         text-align: right; } 
    </style> 
    <title>Models</title>  
    </head> 
    <body> 
    <div id="header"> 
     <img alt="Logo" height="110" 
     src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="276" /> 
     <h1>Models</h1> 
     <span id="login_status">You are currently logged in as stevew</span>  
    </div> <!-- end of header --> 
    </body> 
</html>

источник

2009-03-28 19:14:47

Как выровнять текст по правому с помощью CSS, когда в DIV с элементами блока

ответ

Смежные вопросы