在带有块元素的div中如何使用css在右侧对齐文本答案

【问题标题】：How do I align text on the right using css when in a div with block elements在带有块元素的div中如何使用css在右侧对齐文本
【发布时间】：2010-10-16 02:45:37
【问题描述】：

我希望在我的页面上的标题 div 中生成以下布局，仅使用 CSS

+-----------+ + + + 图片 + 标题文本一些文本在右侧对齐 + + +-----------+

我无法对齐右侧的文本。它保持立即对齐到标题文本下方的右侧和一行，就像这样

+-----------+ + + + 图片 + 标题文字 + + 一些文字在右边对齐 +-----------+

这是我当前的标记。

<!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 元素之后导致换行，但事实并非如此。谁能建议我做错了什么？

【问题讨论】：

标签： css

【解决方案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 不验证，但可以完美运行，如果需要，您可以将其添加到仅 ie6 的 css 文件中。

【讨论】：

感谢贾斯汀，这非常有效。我已经使用右侧绝对定位找到了另一种解决方案，但对我来说很有效。
Justin 是一个不错的优雅解决方案……它满足了 Steve 减少使用标记的愿望。我喜欢！！！
太棒了。我不知道overflow:hidden 会将一个元素扩展为它包含的浮点数。 float: left 真的需要 img 和 h1 吗？好像不是。

【解决方案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>

在某处需要“清除”以清除浮动，但它可以应用于另一个 div 标签，该标签将跟随您的标题而不是包含在标题中。

注意...我对此进行了一些更改，以使图像右侧的文本区域垂直对齐“中间”。您可以将样式更改为基于 css，但这应该可以满足您的需求。

【讨论】：

+1 谢谢。那肯定会奏效。如果可以的话，我会尽量避免额外的标记。

【解决方案3】：

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

【讨论】：

【解决方案4】：

使用“float:right;”

【讨论】：

我已经尝试过了，但它随后呈现在 div 之外和之后。

【解决方案5】：

我对此进行了更多尝试，因为使用缩放和非大小浮动的 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>

【讨论】：