CSS浮动和填充

Question

我正在尝试使用CSS创建一个2列框（33％/ 66％），但我遇到浮动和填充问题。我希望容纳图标和所有文本，包含整个30px填充的包含框。 'facttext'没有向左显示任何填充，即使它设置为30px，有什么明显的原因吗？

使用的代码如下：

Codepen：http://codepen.io/graemebryson/pen/mvBKs

在网站上（显示效果更佳）：http://energy-hypermarket.org/test（@ bottom）

HTML

<div class="fact">
<div class="facticon">
<img src="/wp-content/uploads/fact.outline.png">
<h2>Did You Know?</h2>
</div>
<div class="facttext">
You could save up to 40% on your energy bills by simply upgrading your Boiler with Energy Hypermarket.
<a class="offerbutton" href="/boiler-package">Learn more</a>
</div>
</div>

CSS

.fact {
border: 1px solid rgba(0, 0, 0, 0.09);
}

.facticon {
border-right: 1px solid rgba(0, 0, 0, 0.09);
float: left;
margin-left: auto;
margin-right: auto;
padding: 30px 30px 0;
text-align: center;
width: 33%;
}

.facttext {
padding: 30px;
}

Answer 1

CSS

.facttext {
    padding: 30px;
    float: right;     /* -- New -- */
    width: 66%;       /* -- New -- */
 }

这将在.facttext元素上给出正确的填充。

Answer 2

那是因为你的facttext没有浮动，当你在FireBug中检查你的代码时，你会看到添加了填充，但是在块级别上。

See updated codepen用于更正的填充版本。