我没有玩过很长时间的CSS,而且目前还没有参考.我的问题应该相当容易,但谷歌搜索没有提出足够的答案.所以,增加集体知识......
|#header---------------------------------------------------------------|
| TITLE |
|#sub-title------------------------------------------------------------|
|bread > crumb | username logout |
|#sub-left | #sub-right|
|---------------------------------|------------------------------------|
这就是我想要的布局.标题反正.我希望子标题包含子左和右子.我使用什么css规则来确保div受另一个div的属性约束.在这种情况下,我如何确保子左和右子留在子标题内？
Dar*_*o Z 65
clear:both当你真的没有时,你需要一个底部的div是一个很常见的错误观念.虽然foxy的答案是正确的,但您不需要那种非语义,无用的清算div.您需要做的就是粘overflow:hidden在容器上:
#sub-title { overflow:hidden; }
fox*_*oxy 36
当你漂浮sub-left,sub-right他们不再占用任何空间sub-title.您需要style = "clear: both"在它们下方添加另一个div 以展开包含div或它们出现在它下面.
HTML:
<div id="sub-title">
<div id="sub-left">
sub-left
</div>
<div id="sub-right">
sub-right
</div>
<div class="clear-both"></div>
</div>
CSS:
#sub-left {
float: left;
}
#sub-right {
float: right;
}
.clear-both {
clear: both;
}
这应该做你想要的:
<html>
<head>
<style type="text/css">
#header {
text-align: center;
}
#wrapper {
margin:0 auto;
width:600px;
}
#submain {
margin:0 auto;
width:600px;
}
#sub-left {
float:left;
width:300px;
}
#sub-right {
float:right;
width:240px;
text-align: right;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><h1>Head</h1></div>
<div id="sub-main">
<div id="sub-left">
Right
</div>
<div id="sub-right">
Left
</div>
</div>
</div>
</body>
</html>
您可以使用包装器类控制整个文档,也可以使用子主类控制整个文档.
我同意Darko Z将"overflow:hidden"应用于#sub-title.但是,应该提到的是,除非你有指定的宽度或高度,否则清除浮动的overflow:hidden方法对IE6不起作用.或者,如果您不想指定宽度或高度,可以使用"zoom:1":
#sub-title { overflow:hidden; zoom: 1; }
这个答案增加了上面的解决方案来解决你的最后一句话:
如何确保子左和右子保持在子标题内
问题在于,随着左下或右下的内容扩展,它们将扩展到副标题以下.此行为是针对CSS设计的,但确实会给我们大多数人带来问题.最简单的解决方案是使用CSS Clear声明设置div.
要做到这一点,包括一个CSS语句来定义一个结束div(可以是Clear Left或RIght而不是两者,具体取决于使用的Float声明:
#sub_close {clear:both;}
HTML变成:
<div id="sub-title">
<div id="sub-left">Right</div>
<div id="sub-right">Left</div>
<div id="sub-close"></div>
</div>
对不起,刚刚意识到这是以前发布的,在输入我的回复时不应该做那杯咖啡!
@Darko Z:你是对的,我发现的溢出:auto(或overflow:hidden)解决方案的最佳描述是在SitePoint上的一篇文章中前一段时间简单清除FLoats并且在456bereastreet中也有很好的描述文章CSS提示和技巧第2部分.不得不承认自己懒得自己实施这些解决方案,因为关闭的div cludge工作正常,虽然它当然非常不优雅.因此,从现在开始努力清理我的行为.