这是我的页脚html5代码：
<footer>
<div class="footer">
<nav class="footer-nav">
<ul class="list-1">
<li><img src="img/notes.png" alt="" /></li>
<li>ARTICLES</li>
<li>COLUMNS</li>
<li>BLOG</li>
<li>TOPICS</li>
</ul>
<ul class="list-2">
<li>ABOUT</li>
<li>AUTHORS</li>
<li>MASTHEAD</li>
<li>CONTRUBUTE</li>
<li>STYLE GUIDE</li>
<li>CONTACT</li>
<li>SPONSORSHIPS</li>
</ul>
</nav>
<hr class="hr-style">
<div class="row">
<div class="footer-left">
<img src="img/footer1.png" alt="footer-image" />
<p class="footer-title">.NET Training</p>
<p class="footer-pgf">Less of boring theory! Hands on programming is our training methodology! You'll love it.<p>
<a href="#">learn more </a>
</div>
<div class="footer-right">
<img src="img/footer2.png" alt="footer-image" />
<p class="footer-title">Shopify Expert at $20/hour</p>
<p class="footer-pgf">Unique custom made shopify theme and tweakss. Strat selling online with stunning eCommerce storefronts created using the Shopify CMS</p>
<a href="#">learn more</a>
</div>
</div>
<hr class="hr-style">
<p class="copyright">Copyright © 2013 Dot Net How</p>
</div>
</footer>
和css：
.footer{
clear:both;
background:url('../img/footer-bg.jpg');
overflow: hidden;
}
.footer-left{
float:left;
width: 50%;
}
.footer-right{
float:right;
width:50%;
}
.footer-nav .list-1 {
font-size:13px;
font-weight:600;
text-align: center;
}
.footer-nav .list-2 {
font-size:12px;
font-weight:600;
text-align: center;
}
.footer-nav ul li{
display:inline;
padding:8px;
}
img{
vertical-align: middle;
}
.copyright{
font-size:13px;
text-align: center;
}
.footer-left:after,.footer-right:after{
clear:both;
content: "";
}
.row{}
在页脚中，我添加了<hr />两个位置，例如页脚顶部内容和页脚顶部版权，但它仅显示在页脚内容中。
我的错误是什么，请帮帮我。
这是我试过的JSfiddle链接：http://jsfiddle.net/3jet0dfu/14/
答案 0 :(得分：1)
你错过了一个明确的div
<div style="clear:both;"></div>
里面的
<div class="row">
<div class="footer-left">...</div>
<div class="footer-right">...</div>
</div>
请在此处查看JSFiddle http://jsfiddle.net/3jet0dfu/15/
答案 1 :(得分：0)
试试这个
<html>
<head>
<style>
.footer
{
clear:both;
background:url('../img/footer-bg.jpg');
overflow: hidden;
}
.footer-left
{
float:left;
width: 50%;
}
.footer-right
{
float:right;
width:50%;
}
.footer-nav .list-1
{
font-size:13px;
font-weight:600;
text-align: center;
}
.footer-nav .list-2
{
font-size:12px;
font-weight:600;
text-align: center;
}
.footer-nav ul li
{
display:inline;
padding:8px;
}
img
{
vertical-align: middle;
}
.copyright
{
font-size:13px;
text-align: center;
}
.footer-left:after,.footer-right:after
{
clear:both;
content: "";
}
.a
{
width:500;
float:left;
}
.row{}
</style>
</head>
<body>
<div style="width:1000;margin:0 auto;">
<header>
<img src="http://s18.postimg.org/tvw52r1ux/logo.jpg" alt="logo">
<h1>The Articles</h1>
<nav class="header-nav">
<ul>
<li><a href="#"><img src="http://s12.postimg.org/hyaxg6xah/icon.png" alt="">Home</a></li>
<li><a href="#">Articles</a></li>
</ul>
</nav>
</header>
<section id="section">
<div class="a">
<article class="article">
<div>
<img src="http://s18.postimg.org/7l8a2s4kp/articles.jpg" alt="articles" />
<p class="comments">by<span class="woo"> JOHN WOO</span>
<date>June 04, 2013, 22 Comments</date></p>
<h1 class="issue">Issue No 376</h1>
<p class="lorem">Lorem ipsum dolor sit amer, consectetur adipising elit Vestibulum eu ligula justo, ullamcorper viverraest. Donec viverra libero in tellus ullamcorper lobortis,. Nam nunc metus, molestie sit amet sagitis et, hendrenit quam. Ut hendrerit commodo nunc, eu euismod odio egestas a. Morbi felis lorem, convallis id scelerisque eget, faucibus eget lectus.</p>
<p class="dev-express">asp.net, .net, dev-express</p>
<a href="#" class="myButton">More</a>
</div>
<div>
<img src="http://s18.postimg.org/dnfwt9t0p/cat.png" alt="" />
<p class="comments">by <span class="woo">JOHN WOO</span> <date>June 04, 2013, 22 Comments</date></p>
<h1 class="issue">Issue No 375</h1>
<p class="lorem">Lorem ipsum dolor sit amer, consectetur adipising elit Vestibulum eu ligula justo, ullamcorper viverraest. Donec viverra libero in tellus ullamcorper lobortis,. Nam nunc metus, molestie sit amet sagitis et, hendrenit quam. Ut hendrerit commodo nunc, eu euismod odio egestas a. Morbi felis lorem, convallis id scelerisque eget, faucibus eget lectus.</p>
<p class="dev-express">asp.net, .net, dev-express</p>
<a href="#" class="myButton">More</a>
</div>
</article>
</div>
<div class="a">
<aside class="aside" style="margin:0 0 0 200;">
<img src="http://s18.postimg.org/51cn8oh0p/agencies.jpg" alt="agencies" />
<h3>From the Blog</h3>
<p class="windows">DAVID <i> on </i>c# Windows</p>
<p class="hex">How to convert System.Color to HTML color (hex)?</p>
<p class="sidebar-pgf">I'm working on an application that requires converting the back color of the panel to HTML that can be used as a div background color. Please help.</p>
<a class="view" href="#">view answer</a>
</aside>
</div>
</section>
<footer>
<div class="footer">
<nav class="footer-nav">
<ul class="list-1">
<li><img src="http://s18.postimg.org/4xe8eom5h/notes.png" alt="" /></li>
<li>ARTICLES</li>
<li>COLUMNS</li>
<li>BLOG</li>
<li>TOPICS</li>
</ul>
<ul class="list-2">
<li>ABOUT</li>
<li>AUTHORS</li>
<li>MASTHEAD</li>
<li>CONTRUBUTE</li>
<li>STYLE GUIDE</li>
<li>CONTACT</li>
<li>SPONSORSHIPS</li>
</ul>
</nav>
<hr class="hr-style">
<div class="row">
<div class="footer-left">
<img src="http://s18.postimg.org/itr24b7s9/footer1.png" alt="footer-image" />
<p class="footer-title">.NET Training</p>
<p class="footer-pgf">Less of boring theory! Hands on programming is our training methodology! You'll love it.<p>
<a href="#">learn more </a>
</div>
<div class="footer-right">
<img src="http://s18.postimg.org/gl8a98bah/footer2.png" alt="footer-image" />
<p class="footer-title">Shopify Expert at $20/hour</p>
<p class="footer-pgf">Unique custom made shopify theme and tweakss. Strat selling online with stunning eCommerce storefronts created using the Shopify CMS</p>
<a href="#">learn more</a>
</div>
</div>
<hr class="hr-style">
<p class="copyright">Copyright © 2013 Dot Net How</p>
</div>
</footer>
</div>
</body>
</html>