0

这是我正在制作的网站；

http://teetime.comeze.com/

4 页脚的 DIV 元素看起来很好，直到您缩小浏览器宽度，然后它们才开始从 dang 页脚上掉下来。

我尝试了许多组合，但我不能让它保持不变但也能居中

任何帮助，将不胜感激。

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>
4

3 回答 3

2

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

如果在缩小屏幕时减少页脚的宽度，您是否还考虑过使用媒体查询将内部页脚 div 置于彼此之上？

于 2013-03-19T16:49:11.570 回答
1

您可以在“%”中指定宽度，例如 20%、30%、30%、20%。因此，当您的浏览器宽度减小时，页脚元素也会相应缩小。

于 2013-03-19T16:51:13.430 回答
0

给予min-width你的div.footer意志可以解决问题。:)

于 2013-03-20T04:03:29.187 回答