如何在另一个DIV之后显示DIV而不重叠

时间：2014-09-22 20:13:00

标签： html css 

        .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 -->
    	<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 class="showCopy">Copyright &copy; 2014 WD Medical Group. All rights reserved.</div>
    	</div> <!-- NAV LINKS INNER -->
    </div> <!-- NAV LINKS MAIN --><!-- begin snippet: js hide: false -->

显示：

enter image description here

如何修改以显示：

enter image description here

那么版权会出现在它之上的div之后而不是重叠？

4 个答案:

答案 0 :(得分：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，我在Firefox，Chrome，IE（后期）上测试过它 http://jsfiddle.net/rt1qeg0b/

答案 1 :(得分：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 -->

答案 2 :(得分：1)

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

即可 
.showCopy {
    clear:both;
 }

答案 3 :(得分：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 -->
    	<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&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 class="showCopy">Copyright © 2014 WD Medical Group. All rights reserved.</div>
    	</div> <!-- NAV LINKS INNER -->
    </div> <!-- NAV LINKS MAIN --><!-- begin snippet: js hide: false -->

相关问题
最新问题