我希望在页面上的标题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文件,如果需要的话.
