Как выравнивать текст справа, используя css, когда в div с элементами блока

Я хочу создать следующий макет в div div на моей странице, используя только CSS

+-----------+
+           +
+  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, но это не так. Может ли кто-нибудь предположить, что я делаю неправильно?

ОТВЕТЫ

Ответ 1

#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, если это необходимо.

Ответ 2

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

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

"Clear" потребуется где-то, чтобы очистить плавающее, но оно может быть применено к другому тегу div, который будет следовать за вашим заголовком вместо того, чтобы быть включенным в заголовок.

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

Ответ 3

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

Ответ 4

Используйте "float: right;"

Ответ 5

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

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

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