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

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

11 голосов
/ 28 марта 2009

Я хочу создать следующий макет внутри заголовка 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, но это не так. Кто-нибудь может подсказать, что я делаю не так?

Ответы [ 5 ]

13 голосов
/ 28 марта 2009 
#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. масштабирование не проверяется, но оно работает безупречно, и вы можете добавить его в CSS-файл ie6 only, если это необходимо.

4 голосов
/ 28 марта 2009

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

<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, но это должно привести к тому, что вы искали.

1 голос
/ 28 марта 2009 
img  float: left;  title text  float: left;    some text   float: right;
0 голосов
/ 28 марта 2009

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

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

<!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>
0 голосов
/ 28 марта 2009

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...