css-float - CSS float : left not working here

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

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

Answer 1

摆脱你的填充，你的百分比大于 100% 与填充。或者您可以应用 box-sizing http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

如果你想要空间，你总是可以在左边或右边添加边距，但要确保你的百分比在最后计算为 100%

所以

div 1 30% 宽度和 5% margin right 例如div 2 65% 宽度

所以总计 = 100%

还有其他方法可以做到这一点，但你现在明白了