在页脚中制作4个div不会自动调整大小并居中

http://teetime.comeze.com/

4个页脚DIV元素，直至缩小浏览器的宽度，然后他们才开始脱落宕页脚看起来不错。

我已经尝试了多种组合，但我不能让它保持不变，但也集中

任何帮助，将不胜感激。

CSS 
.footer { 
    background-color: #336600; 
    clear: both; 
    float: none; 
    padding-top: 10px; 
    padding-right: 0; 
    padding-bottom: 0px; 
    padding-left: 0px; 
    height: 330px; 
    color: #F7F7F7; 
    width: 100%; 
    text-align: center; 
} 
#third { 
    width: 180px; 
    float: left; 
    text-align: left; 
    margin-left: 10px; 
} 


#first { 
    width: 300px; 
    float: right; 
    overflow: visible; 
    margin-right: 10px; 
} 
#second { 
    width: auto; 
    float: right; 
    margin-top: 8px; 
    margin-right: 10px; 
    margin-left: 10px; 
} 

#fourth 

Honestly, not sure what to do here, lol! Tried a bunch of different combinations, same result.

相关HTML，页脚不在容器/内容div中。

<div class="footer"> 
<div id=third> 
    <h1>Site Map 
    </h1> 
    <p1> 
    <a href="/index.html">Home page 
</a> <br><a href="/estimate.htm">Estimate form 
</a> <br> <p1><a href="/lawncare.htm">Lawn care process 
</a> <br> 
<p1><a href="/tree.htm">Tree and Shrub Control 
</a> <br> 
<p1><a href="/pestcontrol.htm">Pest Control Services 
</a> <br> 
<p1><a href="/landscape.htm">Organic Landscaping </a> <br> 
<p1><a href="/billpay.htm">Secure Online Bill Pay 
</a> <br> 
<p1><a href="/careers.htm">Careers and Team 
</a> 
<p1> 
<br> 
<p1><a href="/testimony.htm">Customer Testimony and Lawn Gallery 
</a> 
<br> 

</div> 
    <div id=first><p> 
    <h1>Tee Time Lawn Care</h1> 
    <p1>23736 W 119th St 
Plainfield, IL 60585</p1> 
<br> 
    <p1> (815) 609-6969</p1> 
    <br> 
    <br> 
    <p2> A local lawn and landscaping company with an emphasis on safe,organic lawn care. Lawn care companies like us will treat your lawn and yard like a golf course so give us a call if your need the best lawn in your neighburhood. </p2> 
    </div> 
<div id=second> 
    <h1>Lawn care company service in Illinois (Il)<br>Chicagoland area:</h1><p2> 
     Naperville lawn care, Naperville landscaping<br> 
     Plainfield lawn care, Plainfield landscaping<br> 
     Aurora lawn care, Aurora landscaping<br> 
    Channahon lawn care, Channahon landscaping<br> 
     Osego lawn care, Oswego landscaping<br> 
     Shorewood lawn care, Shorewood landscaping<br> 
     Bolingbrook lawn care, Bolingbrook landscaping<br> Barrington lawn care, Barrington landscaping<br> 
     And nearby towns and cities for your yard service needs. 
</p2> 
    </div><div id=fourth> 
    <h1> Our lawn care and landscaping services include:</h1> 
<p2>Organic and granular fertilization, Aeration and seeding, pest control, Tree and Shrub maintenance service, soil conditioning, heat guard, summer recovery, root rejuvenation, winterizng, blanket barrier, mole removal, yard cleaning, lawn and yard mowing, commercial landscaping, weed removal, weed prevention, and more! 
<br> Please contact us for additional services.</p2> 
    </div> 
    <!-- end .footer --> 

</div>

来源

2013-03-19 deek

给你'div.footer'分配'min-width'。 – 2013-03-19 16:52:20

MR_Green FTW！发布作为答案，我会给你信贷〜！ – deek 2013-03-19 20:23:45

给min-width你的div.footer将解决问题。 :)

来源

2013-03-20 04:03:29

看起来您需要在您的页脚中使用百分比宽度作为标记。

您是否还想过如果在缩小屏幕时减少页脚的位置，您是否还想过使用媒体查询来定位内部页脚div？

来源

2013-03-19 16:49:11

您可以在“％”中分配宽度，如20％，30％，30％，20％。所以当你的浏览器宽度减小时，页脚元素也会相应缩小。

来源

2013-03-19 16:51:13

在页脚中制作4个div不会自动调整大小并居中

回答

相关问题