3

ブログ投稿 ( Cooking Stackexchange ブログのため、プラグインが数個しかない通常の WordPress インスタンス) で、「左」に揃えて 3 つの画像を挿入し、それぞれの行を占めるようにしました。テキストをそれらの下から開始したい。

何を試しても (コードに表示される , タグとタグを手動で挿入し<p>まし<br>た<div>)、テキストは画像と同じ行から始まり、見栄えが悪くなります。私に何ができる？

間違ったレイアウト

上記のスクリーンショットを生成するコード:

<p> I expected a bigger difference between these 3 methods. The silicone mat browned the cookies a bit
less than the other methods – so it can provide a little insurance if
you’re afraid of burnt cookies. </p> 
<div><img class="wp-image-870 alignleft" style="margin-left: 2px; margin-right: 2px;" title="baking sheet cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3784-225x300.jpg" alt="Cookies baked on baking sheet" width="225" height="300" /><img class="wp-image-869 alignleft" style="margin-left: 2px; margin-right: 2px;" title="silpat cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3787-225x300.jpg" alt="" width="225" height="300" /><img class="alignleft size-medium wp-image-868" style="margin-left: 2px; margin-right: 2px;" title="parchment paper cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3790-225x300.jpg" alt="" width="225" height="300" /><br/></div>
&nbsp;
<p>I’m going to stick with parchment paper, because it offers one big
advantage over the bare sheet and silicone mat:
4

4 に答える 4

4

高さを適切に計算する<img />には、後でフロートをクリアする必要があります。<div />

style="overflow:hidden;これを開始タグに追加すると<div>、更新されたコードは次のようになります。

<p> I expected a bigger difference between these 3 methods. The silicone mat browned the cookies a bit less than the other methods &ndash; so it can provide a little insurance if you're afraid of burnt cookies. </p>

<div style="overflow:hidden;">
    <img class="wp-image-870 alignleft" style="margin-left: 2px; margin-right: 2px;" title="baking sheet cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3784-225x300.jpg" alt="Cookies baked on baking sheet" width="225" height="300" />
    <img class="wp-image-869 alignleft" style="margin-left: 2px; margin-right: 2px;" title="silpat cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3787-225x300.jpg" alt="" width="225" height="300" />
    <img class="alignleft size-medium wp-image-868" style="margin-left: 2px; margin-right: 2px;" title="parchment paper cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3790-225x300.jpg" alt="" width="225" height="300" />
</div>

<p>I'm going to stick with parchment paper, because it offers one big advantage over the bare sheet and silicone mat:</p>

float の詳細については、http: //css-tricks.com/all-about-floats/を参照してください。

于 2012-08-08T10:58:43.463 に答える
1

clear:bothその部門の CSS スタイルを追加します。

また、その部門の画像用のクラスを追加しないでください。style=""インライン スタイリングを使用する必要はありません.以前の投稿。

于 2012-08-08T10:59:05.993 に答える
1

代わりにこれを試してください。クリアは必要ありません。画像も水平方向に揃えて表示されます。

<p>I expected a bigger difference between these 3 methods. The silicone mat browned the cookies a bit less than the other methods – so it can provide a little insurance if you’re afraid of burnt cookies.</p> 
<p style="text-align: center;"><img class="wp-image-870 alignleft" title="baking sheet cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3784-225x300.jpg" alt="Cookies baked on baking sheet" width="225" height="300" /><img class="size-medium wp-image-868 alignright" title="parchment paper cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3790-225x300.jpg" alt="" width="225" height="300" /><img class="wp-image-869" title="silpat cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3787-225x300.jpg" alt="" width="225" height="300" /></p>
<p>I’m going to stick with parchment paper, because it offers one big advantage over the bare sheet and silicone mat:</p>
于 2012-08-08T11:01:03.180 に答える
0

非常に短い孤立を避けるためにpaを与えます:min-width

p {
    min-width: 10em;
}
于 2012-08-08T12:44:11.437 に答える