我没有玩过很长时间的CSS,而且目前还没有参考.我的问题应该相当容易,但谷歌搜索没有提出足够的答案.所以,增加集体知识......

|#header---------------------------------------------------------------|
|                               TITLE                                  |
|#sub-title------------------------------------------------------------|
|bread > crumb                    |                  username logout   |
|#sub-left                        |                          #sub-right|
|---------------------------------|------------------------------------|

这就是我想要的布局.标题反正.我希望子标题包含子左和右子.我使用什么css规则来确保div受另一个div的属性约束.在这种情况下,我如何确保子左和右子留在子标题内？

1> Darko Z..：

---

clear:both当你真的没有时,你需要一个底部的div是一个很常见的错误观念.虽然foxy的答案是正确的,但您不需要那种非语义,无用的清算div.您需要做的就是粘overflow:hidden在容器上:

#sub-title { overflow:hidden; }

---

"常见的误解"有点苛刻,因为清除div是w3c推荐的方法,但这是一个巧妙的技巧.有关更多信息,请参阅http://www.quirksmode.org/css/clearing.html

---

非常感谢你!我记得大约2年前追逐这个问题,现在我记得使用溢出:隐藏.我会在回到笔记本电脑后立即尝试这个,并将其作为正确的答案.

2> foxy..：

---

当你漂浮sub-left,sub-right他们不再占用任何空间sub-title.您需要style = "clear: both"在它们下方添加另一个div 以展开包含div或它们出现在它下面.

HTML:

   

      sub-left
   
   

      sub-right
   
   

CSS:

#sub-left {
   float: left;
}
#sub-right {
   float: right;
}
.clear-both {
   clear: both;
}

3> csexton..：

---

这应该做你想要的:

    
        

    
    
        

            
Head
            

                

                    Right
                
                

                    Left
                
            
        
    

您可以使用包装器类控制整个文档,也可以使用子主类控制整个文档.

4> Justin Lucen..：

---

我同意Darko Z将"overflow:hidden"应用于#sub-title.但是,应该提到的是,除非你有指定的宽度或高度,否则清除浮动的overflow:hidden方法对IE6不起作用.或者,如果您不想指定宽度或高度,可以使用"zoom:1":

#sub-title { overflow:hidden; zoom: 1; }

5> James Piggot..：

---

这个答案增加了上面的解决方案来解决你的最后一句话:

如何确保子左和右子保持在子标题内

问题在于,随着左下或右下的内容扩展,它们将扩展到副标题以下.此行为是针对CSS设计的,但确实会给我们大多数人带来问题.最简单的解决方案是使用CSS Clear声明设置div.

要做到这一点,包括一个CSS语句来定义一个结束div(可以是Clear Left或RIght而不是两者,具体取决于使用的Float声明:

#sub_close {clear:both;}

HTML变成:

Right
Left

对不起,刚刚意识到这是以前发布的,在输入我的回复时不应该做那杯咖啡!

@Darko Z:你是对的,我发现的溢出:auto(或overflow:hidden)解决方案的最佳描述是在SitePoint上的一篇文章中前一段时间简单清除FLoats并且在456bereastreet中也有很好的描述文章CSS提示和技巧第2部分.不得不承认自己懒得自己实施这些解决方案,因为关闭的div cludge工作正常,虽然它当然非常不优雅.因此,从现在开始努力清理我的行为.