0

ブラウザー ウィンドウが縮小されるまで正常に動作する 4 列のフッターがあります。

2 番目の列 (Div ID の 4 番目) は、他のボックスのいずれかの下にプッシュ テキストを開始します。

ウェブサイトの方が見やすいです: Teetimelawn.com

私はいくつかの解決策を試しましたが、通常、他の 3 つのインライン div 列の近くで 4 番目に 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>
4

1 に答える 1

1

padding次のように、 in #fourth div id を marginに変更してみてください。

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

更新:最新のコメントの例として、このフィドルを作成します。

于 2013-09-06T18:03:04.850 に答える