Question

我有两个div，我在HTML5主页的标题部分使用了这个div。最终我想重构为包含，但这是另一篇文章的重构。我有第二个div偏移。我想显示包含对象的整个容器区域 - 显然，但我遇到了麻烦。

<body>  
<div class="gridContainer clearfix>
    <div id="div1" class="fluid"> 
        <header id="headGraphics">
            <div id="headRectangle1">"Rectangle1"</div>
            <div id="headRectangle2">"Rectangle2"</div>
        </header>
     </div>
</div>
</body>

这是使用boilerplate.css的代码。

 .clearfix:before, .clearfix:after {
     content:"";
     display: table;
 }
 .clearfix:after {
     clear: both;
 }
 .clearfix {
     *zoom: 1;
 }
 .gridContainer.clearfix #headGraphics #headRectangle1 {
     background-color: #FF0100;
     float: left;
     width: 300px;
     height: 75px;
     position: relative;
 }
 .gridContainer.clearfix #headGraphics #headRectangle2 {
     background-color: #FFC30C;
     float: left;
     /*margin-right: 50px;*/
     width: 300px;
     height: 75px;
     position: relative;
     top: 25px;
     right: 200px;
 }
 .gridContainer.clearfix #headGraphics {
     margin:auto;
     margin-top: 20px;
 }
 #headGraphics {
     overflow: hidden;
 }
 .gridContainer.clearfix #div1 {
 }
 .gridContainer.clearfix #mainNav .navTableGrid {
 }

overflow: hidden最初工作正常，但我开始在桌子上创建一个nav，我发现一切都丢失了。

我想知道如何将其他（多个）类应用于选择器。我可以简单地将clearfix :before和:after添加到类属性中。

我使用DW - 不是那么重要，而是......

再次，溢出工作正常。我做了什么？

Answer 1

我发现有关Stack Overflow上的另一个问题的帖子：

What methods of ‘clearfix’ can I use?

这对我来说很好。不确定为什么＆溢出：隐藏＆＃39;工作一分钟而不是下一分钟。

<强> Demo

无法应用Clearfix

1 个答案: