CSS未正确影响HTML

Question

我正在一个网站上工作，很难让CSS像我所期望的那样影响HTML。这是我正在处理的页面：www.lindseybakermedia.com/design/shop-local-weekly/。给我带来问题的部分是交易清单。首先，我在每个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.用于展开文本的修正

清理你们的浮标，

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

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

2.移除上一次 <div>的底部边框

删除最后一个具有类<br>的<div>之后的中断行。

Answer 2

两个有待解决的问题

#1 :last-child“不工作”

div#dealsContent中的最后一个子元素是<br class="clear">，而不是div.deal，因此选择器没有找到与section#homeDealsList div#dealsContent div.deal:last-child匹配的对应元素。您正在使用不必要的标记来清除浮点数。实现清算的最佳实践方法是应用所谓的clearfix。在这里可以找到更多关于它的信息(这篇文章是2005年的，但显然有助于你对这个主题有一个很好的理解)：

http://www.sitepoint.com/simple-clearing-of-floats/

如果您对一些网页设计历史感兴趣，这就是它的全部来源(当时是关于前端相关主题的最有影响力的站点，以及alistapart.com)：

http://www.positioniseverything.net/easyclearing.html

#2 div.deal中的内容“从它的容器中增长”

您需要理解，在计算父元素的高度时，容器中的浮动元素在任何方面都不相关。没有任何附加样式，只有浮动子容器的容器的高度总是为0。这正是clearfix帮助的情况，它最初的目的是:确保容器展开，使其完全包含，它的浮动子元素包含。

因此，要同时解决这两个问题，只需删除

<br class="clear">

并在css中引入一条新规则：

.deal:after {
    content: "";
    display: table;
    visibility: hidden;
    clear: both;
}

任务完成！

这将在页面:after (每个div.deal )中创建一个隐藏的伪元素，而不需要任何额外的不必要的标记，并且这个伪元素为您清除了“魔术”(实际上并非如此)。

Answer 3

清除浮标：

.deal:after {
    content: '';
    display: table;
    clear: both;
}

移除底部边框：

.deal:last-child { border-bottom: none; }