Html 4列上的页脚文本溢出。如何预防?

Html 4列上的页脚文本溢出。如何预防?,html,css,footer,Html,Css,Footer,我有一个四列页脚,在浏览器窗口缩小之前可以正常工作 然后,第二列(Div ID第四列)将开始在另一个框下推送文本: 在网站上更容易看到:Teetimelawn.com 我尝试了一些解决方案,但它们通常会在其他3个内联div列附近将div推到第四个 以下是CSS信息: .footer { background-color: #336600; clear: both; float: none; padding-top: 10px; padding-right:

我有一个四列页脚,在浏览器窗口缩小之前可以正常工作

然后,第二列(Div ID第四列)将开始在另一个框下推送文本:

在网站上更容易看到:Teetimelawn.com

我尝试了一些解决方案,但它们通常会在其他3个内联div列附近将div推到第四个

以下是CSS信息:

.footer {
    background-color: #336600;
    clear: both;
    float: none;
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 0px;
    padding-left: 0px;
    height: 350px;
    color: #F7F7F7;
    min-width: 1400px;
    width: 100%;
    max-height: 350px;
    text-align: center;
    display: inline-block;
}

#third {
    width: 180px;
    float: left;
    text-align: left;
    margin-left: 10px;
    display: inline-block;
    margin-right: 5px;
}


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

#fourth {
    height: 100%;
clear: none;
padding-left: 10px;
padding-right: 10px;
}
这是HTML

<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.html">Lawn Care Process
</a> <br>
 <p1>
 <a href="/trees.html">Tree And Shrub Control
</a> <br>
 <p1><a href="/pestcontrol.html">Pest Control Services
</a> <br>
 <p1><a href="/sprinkler.html">Lawn Sprinkler ervice </a> <br>
 <p1><a href="/paybal.php">Secure Online Bill Pay
</a>  <br>
 <p1>
 <a href="/careers.html">Careers And Team
</a> 
 <p1>
<br>
 <p1>
 <a href="/testimony.html">Customer Testimony And Lawn Gallery
</a> 
<br>

 </div>
  <div id=first><div itemscope itemtype="http://www.schema.org/LocalBusiness">
    <h1 itemprop="name">Tee Time Lawn Care</h1>
  <br>1566 Frontage Rd
O'Fallon, IL 62269</p1></a>
<br>
    <p1 itemprop="telephone">(618) 632-8873<br>(636) 272-8873</p1>
    <br>
<br>
   <p2 itemprop="description"> 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 you need the best lawn in your neighborhood. </p2></div>
  </div>
 <div id=second> 
   <h1>Lawn care company service in  Missouri, Illinois (MO, IL)<br>
  St. Louis suburbs including:</h1>
      Fairview Heights lawn care, Fairview Heights landscaping<br>
      St. Louis lawn care, St. Louis landscaping<br>
      Edwardsville lawn care, Edwardsville landscaping<br>
     Granite city lawn care, Granite city landscaping<br>
      Saint Charles lawn care, Saint Charles landscaping<br>
      Belleville lawn care, Belleville landscaping<br>
      Collinsville lawn care, Collinsville landscaping<br>  O'Fallon lawn care, O'Fallon landscaping<br>
      And nearby  towns and cities for your yard service needs.<br><br>

  </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, winterizing, blanket barrier, mole removal, yard cleaning, lawn and yard mowing, commercial landscaping, weed removal, weed prevention, vole removal, and more!
 <br> Please contact us for additional services.</p2>
  </div>
  <!-- end .footer -->

</div>
<a href="https://plus.google.com/108985556811751806647" rel="publisher">Google+</a>
</body>

</html>

站点地图









开球时间草坪护理
临街路1566号 伊利诺伊州奥法伦62269
(618)632-8873
(636)272-8873

一家当地的草坪和景观公司,强调安全、有机的草坪护理。像我们这样的草坪护理公司会把你的草坪和院子当作高尔夫球场,所以如果你需要附近最好的草坪,请给我们打电话。 伊利诺伊州密苏里州(密苏里州,伊利诺伊州)草坪护理公司服务
圣路易斯郊区包括: 美景山庄草坪养护、美景山庄景观美化
圣路易斯草坪护理,圣路易斯园林绿化
爱德华兹维尔草坪护理、爱德华兹维尔园林绿化
花岗岩城市草坪养护、花岗岩城市绿化
圣查尔斯草坪护理,圣查尔斯园林绿化
Belleville草坪护理、Belleville景观美化
科林斯维尔草坪护理,科林斯维尔园林绿化
奥法伦草坪护理,奥法伦园林绿化
以及附近的城镇,满足您的庭院服务需求。

我们的草坪护理和绿化服务包括: 有机和颗粒施肥、通风和播种、害虫防治、树木和灌木维护服务、土壤调节、防热、夏季恢复、根系再生、越冬、毯子屏障、鼹鼠清除、庭院清洁、草坪和庭院割草、商业景观美化、除草、杂草预防、田鼠清除等等!
如需更多服务,请联系我们。
尝试将
#fourth
div id中的
填充更改为如下边距:

margin-right: 20px;
margin-left: 10px;

更新:我创建了我最新评论的示例。

谢谢,但没有更改。好的,尝试更改页脚宽度。e、 g 95%。将中的
第一个
第二个
第三个
第四个
宽度更改为
百分比(%)
。e、 g如果电流宽度为180px,则更改为18%。那就自以为是吧。但请记住,如果页脚中的所有div宽度相加,请确保结果不超过95%。最后,将页脚宽度设置为100%。