css 页脚内容在 html5 中无法正确显示

Question

这是我的页 footer 分代码:

<footer>
         <div class="footer">
            <nav>
               <ul class="nav-list1">
                  <li><img src="img/article-logo.png"  alt="img"/></li>
                  <li><a href="#">ARTICLES</a></li>
                  <li><a href="#">BLOG</a></li>
                  <li><a href="#">COLUMN</li>
                  <li><a href="#">TOPICS</li>
               </ul>
               <ul class="nav-list2">
                  <li><a href="#">ABOUT</a></li>
                  <li><a href="#">AUTHOURS</a></li>
                  <li><a href="#">MASTHEAD</a></li>
                  <li><a href="#">CONTRIBUTE</a></li>
                  <li><a href="#">STYLEGUIDE</a></li>
                  <li><a href="#">CONTACT</a></li>
                  <li><a href="#">SPONSORSHIPS</a></li>
               </ul>
            </nav>
            <hr class="hr-style" />
           <section class="clearfix footerWidth">
               <div class="footer-column1">
                  <img src="img/footer1.png" class="footer-image" alt="dot"/> 
                  <p class="footer-title-1">.NET Training</p>
                  <p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
                  <p><a class="footer-link" href="#">ask here. ></a></p> 
               </div>
               <div class="footer-column2">
                  <img src="img/footer2.png" class="footer-image" alt="expert"/> 
                  <p class="footer-title-2">Shopify Expert</p>
                  <p class="footer-pgf">Unique custom made Shopify theme and tweaks.</p>
                  <p><a class="footer-link" href="#">click to view</a></p>
               </div>
            </section>
            <hr class="hr-style" />
            <p class="copyright">Copyright &copy; 2013 Dot Net How</p>
         </div>
      </footer>

这是我尝试过的 JSfiddle:

http://jsfiddle.net/u89q6cyz/

现在我的页面是这样的: http://s13.postimg.org/js23ca6nr/Untitled_1_copy.png

现在我需要在图像右侧显示我在图像中标记的页脚内容。

我尝试了所有可能的方法..我不知道如何修复..

谁能帮帮我？

Answer 1

您必须在 CSS 代码中进行两处修改。

1. 移除下一个类的 margin-left。

   .footer-column2 
   {
     /*margin-left: 112px !important;*/
    }   
   

2. 为页脚列添加宽度:50%。

   .footer-column1,.footer-column2
    {
     float:left;
     width:50%;
    }
   

DEMO