html - CSS 没有正确影响 HTML

Question

我在一个网站上工作，很难让 CSS 以我期望的方式影响 HTML。这是我正在处理的页面:www.lindseybakermedia.com/design/shop-local-weekly/ .给我问题的部分是交易 list 。首先，我为每个 div 添加了填充，但由于某种原因，文本似乎正在扩展到各自的 div 之外。其次，我使用了 :last-child 使底部边框远离最后一个 div，但它似乎也不起作用。我一直在使用 Firebug 来弄清楚发生了什么，但真的不知道。任何帮助将不胜感激。

HTML:

<section id="homeDealsList">
   <div id="dealsContent">
      <div id="expirationHeader">
         <!-- EXPIRATION DATE GENERATED AUTOMATICALLY -->
         <p>These deals expire on <span id="expiration">06/03/15</span>.</p>
      </div>
      <!-- ONE DIV GENERATED WITH CONTENT FOR EVERY DEAL -->
      <div class="deal">
         <a href="businessProfile.php?recordID=27" title="logo"><img src="_logos/1418244707.jpg" alt="Business Logo" class="businessLogo" /></a>
         <div class="businessContactInfo">
            <!-- LINK TO BUSINESS PROFILE -->   
            <h4><a href="businessProfile.php?recordID=27">New York Dogs</a></h4>
            <ul>
               <li class="ChamberTitle-A">Chamber Member</li>
               <li>12145 NW Grand Ave</li>
               <li>Any Town, Arizona 85335</li>
            </ul>
         </div>
         <div class="dealDescription">
            <p>"The Works" Only $2 This Week!</p>
            <a href="businessDeal.php?recordID=87" target="_blank" >View Details</a>
         </div>
         <!-- LINK GENERATED BASED ON ADDRESS -->
         <a href="map.php?recordID=27" target="_blank"><img src="images/mapIt.png" alt="Map It" class="mapImg" /></a>
      </div>
      <div class="deal">
         <a href="businessProfile.php?recordID=71" title="logo"><img src="_logos/2865517138.jpg" alt="Business Logo" class="businessLogo" /></a>
         <div class="businessContactInfo">
            <!-- LINK TO BUSINESS PROFILE -->   
            <h4><a href="businessProfile.php?recordID=71">Small Emperor</a></h4>
            <ul>
               <li class="ChamberTitle-A">Chamber Member</li>
               <li>(480) 586-1800</li>
               <li>2702 N GREENFIELD RD</li>
               <li>Any Town, Arizona 85006</li>
               <li><a href="http://www.smallemperor.com" target="_blank">www.smallemperor.com</a></li>
            </ul>
         </div>
         <div class="dealDescription">
            <p>super fridays!!</p>
            <a href="businessDeal.php?recordID=132" target="_blank" >View Details</a>
         </div>
         <!-- LINK GENERATED BASED ON ADDRESS -->
         <a href="map.php?recordID=71" target="_blank"><img src="images/mapIt.png" alt="Map It" class="mapImg" /></a>
      </div>
      <div class="deal">
         <a href="businessProfile.php?recordID=71" title="logo"><img src="_logos/2865517138.jpg" alt="Business Logo" class="businessLogo" /></a>
         <div class="businessContactInfo">
            <!-- LINK TO BUSINESS PROFILE -->   
            <h4><a href="businessProfile.php?recordID=71">Small Emperor</a></h4>
            <ul>
               <li class="ChamberTitle-A">Chamber Member</li>
               <li>(480) 586-1800</li>
               <li>2702 N GREENFIELD RD</li>
               <li>Any Town, Arizona 85006</li>
               <li><a href="http://www.smallemperor.com" target="_blank">www.smallemperor.com</a></li>
            </ul>
         </div>
         <div class="dealDescription">
            <p> Expert Web Design from Lindsey</p>
            <a href="businessDeal.php?recordID=133" target="_blank" >View Details</a>
         </div>
         <!-- LINK GENERATED BASED ON ADDRESS -->
         <a href="map.php?recordID=71" target="_blank"><img src="images/mapIt.png" alt="Map It" class="mapImg" /></a>
      </div>
      <div class="deal">
         <a href="businessProfile.php?recordID=71" title="logo"><img src="_logos/2865517138.jpg" alt="Business Logo" class="businessLogo" /></a>
         <div class="businessContactInfo">
            <!-- LINK TO BUSINESS PROFILE -->   
            <h4><a href="businessProfile.php?recordID=71">Small Emperor</a></h4>
            <ul>
               <li class="ChamberTitle-A">Chamber Member</li>
               <li>(480) 586-1800</li>
               <li>2702 N GREENFIELD RD</li>
               <li>Any Town, Arizona 85006</li>
               <li><a href="http://www.smallemperor.com" target="_blank">www.smallemperor.com</a></li>
            </ul>
         </div>
         <div class="dealDescription">
            <p> Expert Web Design from Lindsey</p>
            <a href="businessDeal.php?recordID=134" target="_blank" >View Details</a>
         </div>
         <!-- LINK GENERATED BASED ON ADDRESS -->
         <a href="map.php?recordID=71" target="_blank"><img src="images/mapIt.png" alt="Map It" class="mapImg" /></a>
      </div>
      <div class="deal">
         <a href="businessProfile.php?recordID=26" title="logo"><img src="_logos/Bobs_logo.gif" alt="Business Logo" class="businessLogo" /></a>
         <div class="businessContactInfo">
            <!-- LINK TO BUSINESS PROFILE -->   
            <h4><a href="businessProfile.php?recordID=26">Bob's Market</a></h4>
            <ul>
               <li class="ChamberTitle-A">Chamber Member</li>
               <li>(623) 222-3333</li>
               <li>12145 NW Grand Ave</li>
               <li>Any Town, Arizona 85335</li>
            </ul>
         </div>
         <div class="dealDescription">
            <p>$2 Freshly Baked Loaf of Bread</p>
            <a href="businessDeal.php?recordID=89" target="_blank" >View Details</a>
         </div>
         <!-- LINK GENERATED BASED ON ADDRESS -->
         <a href="map.php?recordID=26" target="_blank"><img src="images/mapIt.png" alt="Map It" class="mapImg" /></a>
      </div>
      <div class="deal">
         <a href="businessProfile.php?recordID=28" title="logo"><img src="_logos/1418244938.jpg" alt="Business Logo" class="businessLogo" /></a>
         <div class="businessContactInfo">
            <!-- LINK TO BUSINESS PROFILE -->   
            <h4><a href="businessProfile.php?recordID=28">The Hat Store</a></h4>
            <ul>
               <li>(623) 999-3333</li>
               <li>12145 NW Grand Ave</li>
               <li>Any Town, Arizona 85335</li>
            </ul>
         </div>
         <div class="dealDescription">
            <p>All Green Hats 50% Off!</p>
            <a href="businessDeal.php?recordID=64" target="_blank" >View Details</a>
         </div>
         <!-- LINK GENERATED BASED ON ADDRESS -->
         <a href="map.php?recordID=28" target="_blank"><img src="images/mapIt.png" alt="Map It" class="mapImg" /></a>
      </div>
      <br class="clear" />
   </div>
   <!-- GENERATE PRINTABLE ADS -->
   <div id="printAds">
      <a href="deals.php" target="_blank">Print Shop Local Weekly</a>
   </div>
</section>

CSS:

section#homeDealsList div#dealsContent div.deal {
    width: 100%;
    padding: 30px 0;
    border-bottom: 1px solid #222222;
}
section#homeDealsList div#dealsContent div.deal:last-child {
    border: none;
}

Answer 1

<强>1。修复扩展文本

清除 float ，

.deal:after {
   content: " ";
   clear: both;
   display: block;
}

我认为这应该可行。应该可以在大多数现代浏览器上使用，请参阅 http://caniuse.com/#feat=css-gencontent寻求支持。

<强>2。删除最后的底部边框 <div>

删除<br>最后一个 <div 后换行> 有类 .deal分配给它。