0

尝试在下面获取此图像：

图片右侧的文字

但这是我所拥有的：

浮动问题：留在这里

我正在使用此代码如下：

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

4

2 回答 2

2

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

如果您想要空间，您始终可以向左或向右添加边距，但请确保您的百分比最后计算为 100%

所以

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

所以总计 = 100%

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

于 2013-03-28T19:30:33.033 回答
0

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

否则，您必须包装一些 div 以便在您想要的元素内创建填充。

于 2013-03-28T19:31:44.337 回答