Question

我有一个带有html元素的布局，例如section＆amp;页脚。问题是页脚非常奇怪地显示：页脚文本（底部红色背景上的黑色文本）向下移动而不以页脚背景颜色显示。 Padding属性似乎也错误地工作。

HTML code：

<section>
        <div class='post'>
          <div class='post-title>'> Title fo post 1</div>
          <div class='post-subtitle'>
            <div class='added-by'>BY <SPAN class='blue'>MARK XXXX</SPAN></div>
            <div class='added-at'>10:10:00 12/12/2014</div>
          </div>
          <div class='post-body'>
            <p>Body Body Body Body Body Body Body Body Body Body Body Body 
            Body Body Body Body Body Body Body Body Body Body Body Body 
            Body Body Body Body Body Body Body Body Body Body Body Body
            Body Body Body Body Body Body Body Body Body Body Body Body </p>        
          </div>      
        </div>      
        <div class='post'>
          <div class='post-title>'> Title fo post 1</div>
          <div class='post-subtitle'>
            <div class='added-by'>BY <SPAN class='blue'>MARK XXXX</SPAN></div>
            <div class='added-at'>10:10:00 12/12/2014</div>
          </div>
          <div class='post-body'>
          <p>Body Body Body Body Body Body Body Body Body Body Body Body 
            Body Body Body Body Body Body Body Body Body Body Body Body 
            Body Body Body Body Body Body Body Body Body Body Body Body
            Body Body Body Body Body Body Body Body Body Body Body Body </p>            
          </div>      
        </div>
      </section>

      <aside>
        LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! 
        LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU!         
      </aside>     

      <footer>
          <div style="float: left"> Copyrigth TaxHug All Rights Reserved</div>
          <div style="float: right"> About Terms Privacy </div>        
      </footer>

CSS代码：

  .page{
    /* center horizontally */
    margin-left: auto; 
    margin-right: auto;
    /* center horizontally */

    outline: 1px solid black;
    width: 960px;    
  }
    .blue {
      color: blue;
    }      
    .added-by {
      float: left;
      font-size: 10px;
    }

    .added-at {
      float: right;      
      font-size: 10px;
    }

    .post {
      //background-color: yellow;
    }

    .post-subtitle{
      //padding: 0 10px;      
    }

  section
  {
    padding: 10px;
    width: 800px;
    display: block;  
    //background-color: red;
    float: left;
    box-sizing: border-box;
  }

  aside
  {
    padding: 10px;    
    display: block;  
    float: right; 
    max-width: 150px; 
    background-color: yellow;
    box-sizing: border-box;
  }

  footer {
    padding: 10px;
    background-color: red;
    //box-sizing: border-box;
    clear: both;
  }
/* fix for old browsers */  
article, aside, figcaption, figure, footer, header, hgroup, nav, section
{
    display: block;
}

Answer 1

这种情况正在发生，因为页脚没有清除子div上的浮动。一种解决方案是使用clearfix techniques中的一个来清除浮动。由于clear:both;在某些情况下并不总是有效。更多信息here和here。

示例：

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; }

新HTML：

<footer class="clearfix"> .. your code </footer>

新CSS：（页脚现在需要宽度100％）

footer { width:100%; }

<强>样本：

http://jsfiddle.net/okfn5m6r/11/

另外，仅供参考，//不是CSS中的有效评论。 CSS只接受/* */的评论。

选项二：

从页脚子div中删除float:left和float:right内联样式。然后使用这个CSS。如果您不想使用clearfix方法，这是一个替代选项。

footer { white-space:nowrap; } footer div { display:inline-block; width:50%; } footer div + div { text-align:right; }

<强>样本：

http://jsfiddle.net/okfn5m6r/8/

页脚文本从页脚背景移动

1 个答案: