在頁腳中製作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不會自動調整大小並居中

回答

相關問題