2014-09-22 130 views
0

如何另一个DIV后显示一个DIV,不得重复

 .footerList 
 
     { 
 
      list-style: none; 
 
      list-style-type: none; 
 
      padding: 0; 
 
      margin: 0; 
 
      zoom: 1; 
 
     } 
 
     .footerList li 
 
     { 
 
      font-size: x-small; 
 
      padding-bottom: 5px; 
 
     } 
 
     .ftrHeader 
 
     { 
 
      padding: 0; 
 
      margin: 0; 
 
      padding-bottom: 8px; 
 
      padding-top: 8px; 
 
     } 
 
     .showCopy 
 
     { 
 
      width: 100%; 
 
      margin: 0 auto; 
 
      text-align: center; 
 
      padding-top: 18px; 
 
      padding-bottom: 10px; 
 
      font-size: x-small; 
 
      padding-top: 10px; 
 
     }
<div style="width: 100%; margin: 0; padding: 0;"> <!-- NAV LINKS MAIN --> 
 
    \t <div style="width: 80%; margin: 0 auto; overflow: hidden;"> <!-- NAV LINKS INNER --> 
 
    \t \t <div class="navInnerLarge" style="width: 32%; float: left; text-align: left;"> 
 
    \t \t \t <h5 class="ftrHeader">Services</h5> 
 
    \t \t \t <ul class="footerList"> 
 
    \t \t \t \t <li><a href="default.aspx" class="defaultLinks" title="Home">Home</a></li> 
 
    \t \t \t \t <li><a href="my.aspx" class="defaultLinks" title="My ">My</a></li> 
 
    \t \t \t \t <li><a href="find_provider.aspx" class="defaultLinks"title="Find a Provider">Find a Provider</a></li> 
 
    \t \t \t \t <li><a href="services.aspx" class="defaultLinks"title="Services">Services</a></li> 
 
    \t \t \t \t <li><a href="locations.aspx" class="defaultLinks"title="Locations">Locations</a></li> 
 
    \t \t \t </ul> 
 
    \t \t </div> 
 
    \t \t <div class="navInnerLarge" style="width: 32%; float: right; text-align: left;"> 
 
    \t \t \t <h5 class="ftrHeader">Stay Connected</h5> 
 
    \t \t \t <ul class="footerList"> 
 
    \t \t \t \t <li><a target="_blank" href="http://www.facebook.com/pa861093865" class="defaultLinks"title="Like us on Facebook"><img src="theImages/facebook.png" alt="Facebook" class="socialIcon" /> Facebook</a></li> 
 
    \t \t \t \t <li><a target="_blank" href="http://twitter.com/p" class="defaultLinks"title="Follow us on Twitter"><img src="theImages/twitter.png" alt="Twitter" class="socialIcon" /> Twitter</a></li> 
 
    \t \t \t \t <li><a target="_blank" href="http://www.linkedin.com/companah" class="defaultLinks"title="Connect with us on LinkedIn"><img src="theImages/linkedin.png" alt="LinkedIn" class="socialIcon" /> LinkedIn</a></li> 
 
    \t \t \t \t <li><a target="_blank" href="http://www.youtube.com/user/WESTd=3&amp;ob=5" class="defaultLinks"title="Watch us on YouTube"><img src="theImages/youtube.png" alt="YouTube" class="socialIcon" /> YouTube</a></li> 
 
    \t \t \t \t <li><a target="_blank" href="http://pinterest.com/up/" class="defaultLinks"title="Pin us on Pinterest"><img src="theImages/pinterest.png" alt="YouTube" class="socialIcon" /> Pinterest</a></li> 
 
    \t \t \t \t <li><a target="_blank" href="http://tumblr.com/" class="defaultLinks"title="Blog about us on Tumblr"><img src="theImages/tumblr.png" alt="Tumblr" class="socialIcon" /> Tumblr</a></li> 
 
    \t \t \t \t <li><a target="_blank" href="https://plus.google.com/112233" class="defaultLinks"title="+1 us on Google+"><img src="theImages/googleplus.png" alt="Google+" class="socialIcon" /> Google+</a></li> 
 
    \t \t \t </ul> 
 
    \t \t </div> 
 
    \t \t <div class="navInnerLarge" style="width: 32%; float: left; text-align: left;"> 
 
    \t \t \t <h5 class="ftrHeader">Resources</h5> 
 
    \t \t \t <ul class="footerList"> 
 
    \t \t \t \t <li><a href="patient_information.aspx" class="defaultLinks"title="Patient Information">Patient Information</a></li> 
 
    \t \t \t \t <li><a href="news_events.aspx" class="defaultLinks"title="News & Events">News & Events</a></li> 
 
    \t \t \t \t <li><a href="healthy_living.aspx" class="defaultLinks"title="Healthy Living">Healthy Living</a></li> 
 
    \t \t \t \t <li><a href="newsletter.aspx" class="defaultLinks"title="INTouch Newsletter">INTouch Newsletter</a></li> 
 
    \t \t \t \t <li><a href="career_opportunities.aspx" class="defaultLinks"title="Career Opportunities">Career Opportunities</a></li> 
 
    \t \t \t \t <li><a href="policies.aspx" class="defaultLinks"title="Policies">Policies</a></li> 
 
    \t \t \t </ul> 
 
    \t \t </div> 
 
    \t \t <div class="showCopy">Copyright &copy; 2014 WD Medical Group. All rights reserved.</div> 
 
    \t </div> <!-- NAV LINKS INNER --> 
 
    </div> <!-- NAV LINKS MAIN --><!-- begin snippet: js hide: false -->

显示此:

enter image description here

我如何可以修改显示的:

enter image description here

因此,版权将出现在它上面的div并且不重叠?

+0

请接受修复您的问题的答案。如果他们中的任何一个都没有,那就不要对它们进行投票。留下评论为什么它没有解决你的问题。 – Dayan 2014-09-22 20:27:37

回答

1

使用空

<div style="clear: both;"></div> 
两个潜水之间

和我跳这将工作,只要你想

<div style="width: 100%; margin: 0; padding: 0;"> <!-- NAV LINKS MAIN --> 
    <div style="width: 80%; margin: 0 auto; overflow: hidden;"> <!-- NAV LINKS INNER --> 
     <div class="navInnerLarge" style="width: 32%; float: left; text-align: left;"> 
      <h5 class="ftrHeader">Services</h5> 
      <ul class="footerList"> 
       <li><a href="default.aspx" class="defaultLinks" title="Home">Home</a></li> 
       <li><a href="my.aspx" class="defaultLinks" title="My ">My</a></li> 
       <li><a href="find_provider.aspx" class="defaultLinks"title="Find a Provider">Find a Provider</a></li> 
       <li><a href="services.aspx" class="defaultLinks"title="Services">Services</a></li> 
       <li><a href="locations.aspx" class="defaultLinks"title="Locations">Locations</a></li> 
      </ul> 
     </div> 
     <div class="navInnerLarge" style="width: 32%; float: right; text-align: left;"> 
      <h5 class="ftrHeader">Stay Connected</h5> 
      <ul class="footerList"> 
       <li><a target="_blank" href="http://www.facebook.com/pa861093865" class="defaultLinks"title="Like us on Facebook"><img src="theImages/facebook.png" alt="Facebook" class="socialIcon" /> Facebook</a></li> 
       <li><a target="_blank" href="http://twitter.com/p" class="defaultLinks"title="Follow us on Twitter"><img src="theImages/twitter.png" alt="Twitter" class="socialIcon" /> Twitter</a></li> 
       <li><a target="_blank" href="http://www.linkedin.com/companah" class="defaultLinks"title="Connect with us on LinkedIn"><img src="theImages/linkedin.png" alt="LinkedIn" class="socialIcon" /> LinkedIn</a></li> 
       <li><a target="_blank" href="http://www.youtube.com/user/WESTd=3&amp;ob=5" class="defaultLinks"title="Watch us on YouTube"><img src="theImages/youtube.png" alt="YouTube" class="socialIcon" /> YouTube</a></li> 
       <li><a target="_blank" href="http://pinterest.com/up/" class="defaultLinks"title="Pin us on Pinterest"><img src="theImages/pinterest.png" alt="YouTube" class="socialIcon" /> Pinterest</a></li> 
       <li><a target="_blank" href="http://tumblr.com/" class="defaultLinks"title="Blog about us on Tumblr"><img src="theImages/tumblr.png" alt="Tumblr" class="socialIcon" /> Tumblr</a></li> 
       <li><a target="_blank" href="https://plus.google.com/112233" class="defaultLinks"title="+1 us on Google+"><img src="theImages/googleplus.png" alt="Google+" class="socialIcon" /> Google+</a></li> 
      </ul> 
     </div> 
     <div class="navInnerLarge" style="width: 32%; float: left; text-align: left;"> 
      <h5 class="ftrHeader">Resources</h5> 
      <ul class="footerList"> 
       <li><a href="patient_information.aspx" class="defaultLinks"title="Patient Information">Patient Information</a></li> 
       <li><a href="news_events.aspx" class="defaultLinks"title="News & Events">News & Events</a></li> 
       <li><a href="healthy_living.aspx" class="defaultLinks"title="Healthy Living">Healthy Living</a></li> 
       <li><a href="newsletter.aspx" class="defaultLinks"title="INTouch Newsletter">INTouch Newsletter</a></li> 
       <li><a href="career_opportunities.aspx" class="defaultLinks"title="Career Opportunities">Career Opportunities</a></li> 
       <li><a href="policies.aspx" class="defaultLinks"title="Policies">Policies</a></li> 
      </ul> 
     </div> 

这是我的例子

<div style="clear: both;"></div> 



     <div class="showCopy">Copyright &copy; 2014 WD Medical Group. All rights reserved.</div> 
    </div> <!-- NAV LINKS INNER --> 
</div> <!-- NAV LINKS MAIN --> 
+0

诀窍。谢谢:) – SearchForKnowledge 2014-09-22 20:22:42

1

添加float: right;

.showCopy 
{ 
    width: 100%; 
    margin: 0 auto; 
    text-align: center; 
    padding-top: 18px; 
    padding-bottom: 10px; 
    font-size: x-small; 
    padding-top: 10px; 
    float: right; 
} 

这里的的jsfiddle,我测试了火狐,Chrome,IE(latests) http://jsfiddle.net/rt1qeg0b/

+0

谢谢。这也是一个可行的解决方案。投票! – SearchForKnowledge 2014-09-22 20:23:09

0

添加到clear:both;.showCopy

 .footerList 
 
     { 
 
      list-style: none; 
 
      list-style-type: none; 
 
      padding: 0; 
 
      margin: 0; 
 
      zoom: 1; 
 
     } 
 
     .footerList li 
 
     { 
 
      font-size: x-small; 
 
      padding-bottom: 5px; 
 
     } 
 
     .ftrHeader 
 
     { 
 
      padding: 0; 
 
      margin: 0; 
 
      padding-bottom: 8px; 
 
      padding-top: 8px; 
 
     } 
 
     .showCopy 
 
     { 
 
      width: 100%; 
 
      margin: 0 auto; 
 
      text-align: center; 
 
      padding-top: 18px; 
 
      padding-bottom: 10px; 
 
      font-size: x-small; 
 
      padding-top: 10px; 
 
clear:both; 
 
     }
<div style="width: 100%; margin: 0; padding: 0;"> <!-- NAV LINKS MAIN --> 
 
    \t <div style="width: 80%; margin: 0 auto; overflow: hidden;"> <!-- NAV LINKS INNER --> 
 
    \t \t <div class="navInnerLarge" style="width: 32%; float: left; text-align: left;"> 
 
    \t \t \t <h5 class="ftrHeader">Services</h5> 
 
    \t \t \t <ul class="footerList"> 
 
    \t \t \t \t <li><a href="default.aspx" class="defaultLinks" title="Home">Home</a></li> 
 
    \t \t \t \t <li><a href="my.aspx" class="defaultLinks" title="My ">My</a></li> 
 
    \t \t \t \t <li><a href="find_provider.aspx" class="defaultLinks"title="Find a Provider">Find a Provider</a></li> 
 
    \t \t \t \t <li><a href="services.aspx" class="defaultLinks"title="Services">Services</a></li> 
 
    \t \t \t \t <li><a href="locations.aspx" class="defaultLinks"title="Locations">Locations</a></li> 
 
    \t \t \t </ul> 
 
    \t \t </div> 
 
    \t \t <div class="navInnerLarge" style="width: 32%; float: right; text-align: left;"> 
 
    \t \t \t <h5 class="ftrHeader">Stay Connected</h5> 
 
    \t \t \t <ul class="footerList"> 
 
    \t \t \t \t <li><a target="_blank" href="http://www.facebook.com/pa861093865" class="defaultLinks"title="Like us on Facebook"><img src="theImages/facebook.png" alt="Facebook" class="socialIcon" /> Facebook</a></li> 
 
    \t \t \t \t <li><a target="_blank" href="http://twitter.com/p" class="defaultLinks"title="Follow us on Twitter"><img src="theImages/twitter.png" alt="Twitter" class="socialIcon" /> Twitter</a></li> 
 
    \t \t \t \t <li><a target="_blank" href="http://www.linkedin.com/companah" class="defaultLinks"title="Connect with us on LinkedIn"><img src="theImages/linkedin.png" alt="LinkedIn" class="socialIcon" /> LinkedIn</a></li> 
 
    \t \t \t \t <li><a target="_blank" href="http://www.youtube.com/user/WESTd=3&ob=5" class="defaultLinks"title="Watch us on YouTube"><img src="theImages/youtube.png" alt="YouTube" class="socialIcon" /> YouTube</a></li> 
 
    \t \t \t \t <li><a target="_blank" href="http://pinterest.com/up/" class="defaultLinks"title="Pin us on Pinterest"><img src="theImages/pinterest.png" alt="YouTube" class="socialIcon" /> Pinterest</a></li> 
 
    \t \t \t \t <li><a target="_blank" href="http://tumblr.com/" class="defaultLinks"title="Blog about us on Tumblr"><img src="theImages/tumblr.png" alt="Tumblr" class="socialIcon" /> Tumblr</a></li> 
 
    \t \t \t \t <li><a target="_blank" href="https://plus.google.com/112233" class="defaultLinks"title="+1 us on Google+"><img src="theImages/googleplus.png" alt="Google+" class="socialIcon" /> Google+</a></li> 
 
    \t \t \t </ul> 
 
    \t \t </div> 
 
    \t \t <div class="navInnerLarge" style="width: 32%; float: left; text-align: left;"> 
 
    \t \t \t <h5 class="ftrHeader">Resources</h5> 
 
    \t \t \t <ul class="footerList"> 
 
    \t \t \t \t <li><a href="patient_information.aspx" class="defaultLinks"title="Patient Information">Patient Information</a></li> 
 
    \t \t \t \t <li><a href="news_events.aspx" class="defaultLinks"title="News & Events">News & Events</a></li> 
 
    \t \t \t \t <li><a href="healthy_living.aspx" class="defaultLinks"title="Healthy Living">Healthy Living</a></li> 
 
    \t \t \t \t <li><a href="newsletter.aspx" class="defaultLinks"title="INTouch Newsletter">INTouch Newsletter</a></li> 
 
    \t \t \t \t <li><a href="career_opportunities.aspx" class="defaultLinks"title="Career Opportunities">Career Opportunities</a></li> 
 
    \t \t \t \t <li><a href="policies.aspx" class="defaultLinks"title="Policies">Policies</a></li> 
 
    \t \t \t </ul> 
 
    \t \t </div> 
 
    \t \t <div class="showCopy">Copyright © 2014 WD Medical Group. All rights reserved.</div> 
 
    \t </div> <!-- NAV LINKS INNER --> 
 
    </div> <!-- NAV LINKS MAIN --><!-- begin snippet: js hide: false -->

+0

谢谢。这也是一个可行的解决方案,但没有为我安静工作。 Up投了反应的时间! – SearchForKnowledge 2014-09-22 20:23:39

1

只需添加clear:both到您的版权部分

.showCopy { 
    clear:both; 
} 
+0

谢谢。这也是一个可行的解决方案,但没有为我安静工作。 Up投了反应的时间! – SearchForKnowledge 2014-09-22 20:24:01