CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了当使用块元素的div时,如何使用css对齐文本大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我希望在页面上的标题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元素之后的换行符,但事实并非如此.任何人都可以建议我做错了什么?

解决方法

#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.我经常使用上述技巧来做你正在做的事情.溢出:隐藏;使标题清除浮动,但是如果没有指定宽度,则需要缩放:1;对于IE6.缩放不验证,但它完美无缺,您可以将其添加到ie6只有css文件,如果需要的话.

大佬总结

以上是大佬教程为你收集整理的当使用块元素的div时,如何使用css对齐文本全部内容,希望文章能够帮你解决当使用块元素的div时,如何使用css对齐文本所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。