0

WordPressのキャプションと左揃えの画像があります（コードは下にあります）。下部の<div>タグは動的に表示されます（一度に1つだけ表示されます）。表示すると、画像の下部から突き出ているため、テキストの一部は画像の右側にあり、一部は画像の真下で左端まで折り返されます。改行をハードコーディングせずに、画像の後に画像が左に折り返されるのを防ぐ簡単な方法はありますか？

大まかな例を次に示します（ドロップダウンでオプション1またはオプション2を選択します）。

<div style="margin-top: -50px;">
[caption id="" align="alignleft" width="200"]<a href="LINK">
<img alt="alt" src="LINK" title="title" width="200" height="257"></a>
Click the image to view it full size[/caption]
A bunch of random text.<br>
<br>
<form>
<select id="choices">
    <option value="none">Select an option...</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
    <option value="option6">Option 6</option>
    <option value="option7">Option 7</option>
</select>
</form>
<div id="option1" class="hide">Option 1 TEXT</div>
<div id="option2" class="hide">Option 2 TEXT</div>
<div id="option3" class="hide">Option 3 TEXT</div>
<div id="option4" class="hide">Option 4 TEXT</div>
<div id="option5" class="hide">Option 5 TEXT</div>
<div id="option6" class="hide">Option 6 TEXT</div>
<div id="option7" class="hide">Option 7 TEXT</div>

JSFIDDLE

4

1 に答える 1

1

既にimgフロートされた左があり、その幅を知っているので、最も簡単な方法は、インデントするすべてのものを div でラップし、margin-leftそのラッパー div に を追加することです。

更新されたフィドラーは次のとおりです。http://jsfiddle.net/F7JzJ/1/

于 2012-09-16T00:37:24.020 に答える