代码之家 › 专栏 › 技术社区 › Steve Weet

在包含块元素的DIV中,如何使用CSS右对齐文本

css

Steve Weet · 技术社区 · 16 年前

我希望在我的页面的标题分区内生成以下布局,仅使用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 回复 | 直到 16 年前

Justin Lucente 16 年前

#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; }

元素周围不需要额外的分隔符,浮动时也不需要清除分隔符。我经常使用上面的技巧来做你想做的事情。溢出:隐藏;使标题清除浮动,但如果没有指定宽度,则需要缩放:1;对于IE6。缩放不验证,但它可以完美地工作,如果需要,您可以将其添加到仅IE6的CSS文件中。

Bryan Sebastian 16 年前

你很可能要做这样的事…

<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的样式,但这应该会实现您所寻找的。

Jakub Arnold 16 年前

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

Albert 16 年前

使用“float:right;”

Steve Weet 16 年前

当使用缩放和非大小浮动的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>