Question

这是我正在制作的网站;

http://teetime.comeze.com/

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

我尝试了很多组合，但我不能让它保持不变但也集中在一起

任何帮助都将不胜感激。

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>

Answer 1

看起来您需要在页脚中使用代码的百分比宽度。

如果在缩小屏幕时减少页脚的占用，您是否还考虑过使用媒体查询将内部页脚div放在彼此的顶部？

Answer 2

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

Answer 3

将min-width提供给div.footer将解决问题。：）

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

3 个答案: