我希望在我的页面上的标题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元素之后不会导致换行,但事实并非如此.任何人都可以建议我做错了什么？
Jus*_*nte 13
#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 only css文件中.