CSS浮动：离开不在这里工作

Question

尝试在下面显示此图片：

但这就是我所拥有的：

我使用此代码如下：

HTML：

<div class="floatright" style="width: 50%;">
    <div class="floatleft" style="width: 35%;">
        <img src="images/exhibitingopportunities.png" alt="Exhibiting Opportunities" style="border: none; width: auto; max-width: 100%;" />
    </div>
    <div class="floatleft sidespadding" style="width: 65%;">
        <h4>Exhibiting Opportunities</h4>
        <p class="desc">The Opportunity Finance Network Conference is a great place to connect with decision makers across the industry.  Reserve your booth space now&mdash;contact Katie Kirchner for more information.</p>
    </div>
</div>
<div style="width: 50%;">
    <div class="floatleft" style="width: 35%;">
        <img src="images/sponsorship_opportunities.png" alt="Sponsorship Opportunities" style="border: none; width: auto; max-width: 100%;" />
    </div>
    <div class="floatleft sidespadding" style="width: 65%;">
        <h4>Sponsorship Opportunities</h4>
        <p class="desc">Reserve your slot now to be a part of the CDFI industry's premier event!  The OFN Conference provides our partners with an unparalleled platform to connect with CDFIs, increase awareness of their organizations' work, and support and strengthen the practice of opportunity finance.</p>
    </div>
</div>

CSS：

.floatleft
{
    float: left;
}

.floatright
{
    float: right;
}

.sidespadding
{
    padding-left: 1.2em;
    padding-right: 1.2em;
}

.clear
{
    clear: both;
}

无法使文本浮动到实际图像的左侧，就像第一张图片中的图像一样。天哪，我在这里错过了什么？这里的网页：http://opportunityfinance.net/Test/2013conf/index.html

Answer 1

摆脱你的填充，用填充你的％大于100％。 或者您可以应用大小调整http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

如果您想要空间，您可以随时向左或向右添加保证金，但要确保您的百分比最终计算为100％

所以

div 1 30％宽度，例如5％边距 div 2 65％宽度

总计= 100％

还有其他方法可以实现这一目标但你现在明白了

Answer 2

填充增加了总宽度，使其达到65％+ 2.4em 如果向后兼容旧版本的IE不是问题，您可以使用CSS calc

否则你必须包装一些div才能在你想要的元素中创建填充。