时间戳

首页 > 解决方案 > 页脚与内容重叠

html - 页脚与内容重叠

问题描述

我试图将“Vaccet”图片作为页脚，但它一直在“UPM”图片旁边。

在此处输入图像描述

我试过从正文中删除页脚。在我制作的其他网站上，页脚的内容位于其上方的部分下方，但它位于其旁边。

   .column-2 {
      float: left;
      width: 33.3%;
      padding: 5px;
      padding-right: 30px;
      display: inline-block;
    }
    
    .column-3 {
      float: right;
      width: 30%;
      display: inline-block;
      padding-right: 30px;
      padding
    }
    
    .section-team{
        text-align: center;
        
    }
    
    .members{
        border-radius: 50%;
    }
    
    .upm{
        padding-top: 25px;
        padding-right: 5px;
    }
    
    footer{
        padding: 50px;
        font-size: 80%;
        
    }
    
    .footer-nav{
       display: inline-block;
       width: 100%
    }
    <section class="section-team" id="team">
        <div class="row">
           <h2>team members</h2>    
        </div>
      <div class="column-2">
        <img src="img/faceexample.jpg" class="members" alt="members" style="width:50%">
        <h3>Adam</h3>
      </div>
       <div class="column-2">
        <img src="img/faceexample.jpg" class="members" alt="members" style="width:50%">
        <h3>Adam</h3>
      </div>
       <div class="column-2">
        <img src="img/faceexample.jpg" class="members" alt="members" style="width:50%">
        <h3>Adam</h3>
      </div>
       <div class="column-2">
        <img src="img/faceexample.jpg"  class="members" alt="members" style="width:50%">
        <h3>Adam</h3>
      </div>
       <div class="column-2">
        <img src="img/faceexample.jpg" class="members" alt="members" style="width:50%">
        <h3>Adam</h3>
      </div>
       <div class="column-2">
        <img src="img/faceexample.jpg" class="members" alt="members" style="width:50%">
        <h3>Adam</h3>
      </div>
        <div class="column-3">
        <img src="img/upm.jpg" class="upm" alt="upm" style="width:30%">
        <h4>UPM</h4>
      </div>       
        </section>
         <footer>
              <div class="row">
                <div class="col span-1-of-2">
                    <ul class="footer-nav">
                          <img src="img/Vaccet.jpg" alt="vaccet logo" 
                            class="logo">
                    </ul>
                </div> 
            </div>

我希望有人能告诉我如何解决页脚问题

标签： htmlcss

解决方案

我认为问题在于<section>不是clearfix-ed。使用float元素时，必须清除容器（.section-team在这种情况下）

试试下面的 CSS（Clearfix Hack）：

.section-team:after,.section-team:before{
  content:''
  clear:both;
  display:table;
}

推荐阅读