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

最初の写真の画像のように、テキストを実際の画像の左側に浮かせることはできません。OMG、ここで何が欠けていますか? ウェブページはこちら: http://opportunityfinance.net/Test/2013conf/index.html

4

2 に答える 2

2

パディングを取り除きます。% はパディングで 100% を超えています。または、ボックスサイジング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 に答える