html - 画像の折り返しに関するアドバイスはありますか？

Question

を実行しようとしていますがfloating design、ブラウザのサイズを変更すると、<p>タグの横にある<img>タグが画像の下ではなく、列に配置され始めます。ここでコードを見ることができます-> http://funkz.nfshost.com/ それは"**main-bottom-post**" ID . にあります私もネットを検索しましたが、ほとんどの記事はその逆です-imgの隣に列を作ります。よろしくお願いします、MK

Answer 1

positionプロパティを与えてみてください。

またはで試してみてくださいmedia queries

@media screen and (min-width: xxpx) {
   div {width: xxpx;}
 }

このリンクを試してください

http://webdesignerwall.com/tutorials/response-design-with-css3-media-queries

http://www.danstorm.com/dan-storm-article-css-15.html

Answer 2

css でこれを試してください:display:inline-blockブラウザのサイズを変更すると成功します

Answer 3

画像の下に移動してその上に を適用する場合は、メディア クエリを使用して特定の解像度をターゲットにする必要があります。<p class="post-text">float: left;

例えば ​​：

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    p.post-text {
        float: left;
    }
}

これにより<p class="post-text">、画面幅が480pxから320pxの間の画像の下にフロートが作成されます。

さらに参考にするために、これを参照することもできます。