CSS没有正确地影响HTML

Question

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

HTML：

int()

CSS：

:last-child

Answer 1

<强> 1。修复扩展文字

清除你的花车，

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

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

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

在最后<br>＆gt;之后删除<div换行符已为其分配了类.deal。

Answer 2

要解决的2个问题

＃1 :last-child＆＃34; 无法正常工作＆＃34;

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内的内容增长了＆＃39;它的容器

在计算父元素的高度时，您需要了解容器内的浮动元素与之无关。如果没有任何其他样式，只有浮动子项的容器将始终具有高度0 。这正是clearfix有用的情况以及它的原始用途：确保容器展开以便完全 包含 它漂浮的儿童元素。

因此，要立即解决这两个问题，只需删除

即可

<br class="clear">

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

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

完成任务！

这会在页面:after中每div.deal创建一个隐藏的伪元素，而不需要任何额外的，不必要的标记，并且此伪元素执行clearfix＆＃34; magic＆＃34; （事实上​​它并不适合你）。

Answer 3

清除花车：

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

删除底部边框：

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

Answer 4

为了删除底部的额外边框，它不是由last-child引起的，它是由整个部分/表引起的。

删除线条或目标.clear以删除边框

<br class="clear">

您需要为每个项目设置溢出问题的高度。

.deal {
  height: 150px;
}

Answer 5

在你的html put：

<style>
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;
}

</style>