イメージを1列に折り返す

Question

イメージがあります。テキストが折り返されますが、約793pxで1列にドロップするだけです。上にイメージ、下にテキストをドロップします。私はfloat：noneでメディアクエリを試みましたが、何らかの理由でそれがうまくいかなかったのです。前もって感謝します！

/*float left*/ .left { float: left; /*left in our text*/ margin: 3px; /*space around the image*/ 
 
} 
 

 
@media (max-width: 793px;) { 
 
\t img { 
 
\t \t 
 
     float:none; 
 

 
\t } 
 

 
}

<p> <img src="https://36.media.tumblr.com/e09631b272ecaf21862513edd536eeed/tumblr_n7a2ldALJt1so5delo1_500.jpg" alt="temp" class="left" /> Lorem "ipsum" dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
 

 
\t \t \t Maecenas tempor finibus hendrerit. Aenean rutrum rhoncus ultricies. Vivamus egestas sollicitudin ex pulvinar finibus. Suspendisse a mi ac augue dictum blandit. Donec malesuada convallis placerat. Integer et hendrerit tellus. Donec eu justo mattis, consectetur orci ac, posuere diam. Integer nec accumsan turpis. Ut quis dolor eu ante pulvinar iaculis cursus at quam. 
 

 
\t \t \t Donec laoreet facilisis sapien euismod finibus. Nam malesuada dapibus ex, sed rutrum tortor consequat in. Aenean quis elit dapibus, vestibulum massa nec, porta odio. Nam accumsan est sed velit scelerisque commodo. Morbi id massa quis lorem tristique convallis at vel leo. Aenean pharetra aliquam porta. Sed ac tellus rutrum, egestas leo sed, sagittis velit. Vestibulum et tellus arcu. 
 

 
\t \t \t Suspendisse imperdiet purus felis, at pharetra magna molestie at. Aenean non nibh sed ex laoreet tempor vel vel dui. Fusce ut arcu eget mi pulvinar molestie a ut metus. Etiam ex ante, volutpat ac leo convallis, venenatis sollicitudin lorem. Mauris tempor mollis euismod. Phasellus viverra dolor egestas turpis pulvinar, ac sollicitudin arcu facilisis. Sed viverra quam lectus, in fermentum libero vestibulum ac. Duis fringilla tempus dui, lobortis fringilla lacus volutpat quis. Nam iaculis nisl vitae mauris scelerisque, eget vulputate purus aliquet. Nullam dictum nunc a enim tempus, et fermentum lectus tristique. 
 

 
\t \t \t Nulla quis mattis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a elit nec ipsum accumsan cursus. Nunc vitae lorem a tellus aliquam luctus eu eget turpis. Vivamus dapibus elementum imperdiet. Nullam facilisis mauris ac tellus fringilla volutpat. Sed elementum ligula dolor, vitae tincidunt ligula ultrices in. 
 
\t \t \t </p>

Answer 1

あなたが問題を抱えている理由は、画像は、デフォルトでは、インラインであるということですので、我々はメディアクエリで画像にdisplay: blockを追加する必要があります。また、メディアクエリに一部のコンポーネントがありません。

CSS：

img{ 
    float: left; 
} 

@media screen and (max-width: 793px){ 
    img{ 
    display: block; 
    float: none; 
    margin: 0 auto 15px; 
    } 
} 

トリックを行う必要があります。ここにはfiddleがあります。

更新 イメージをいくつかのマージンを置き、フィディッドとコードを更新しました。

Answer 2

私は他の答えが完璧にうまくいくと思います。問題の1つが、メディアクエリが正しくフォーマットされていないことがわかったとき、私は実際にあなたのバグに苦労していました。セミコロンは物事を乱していました。とにかく、幸せなコーディング！作業を行った

img { 
 
    float: left; 
 
    margin: 3px; 
 
} 
 

 
@media (max-width: 793px) { 
 
\t p { 
 
     float: left; 
 
\t } 
 

 
}

<img src="https://36.media.tumblr.com/e09631b272ecaf21862513edd536eeed/tumblr_n7a2ldALJt1so5delo1_500.jpg" alt="temp"/> 
 

 
<p>Lorem "ipsum" dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
 
Maecenas tempor finibus hendrerit. Aenean rutrum rhoncus ultricies. Vivamus egestas sollicitudin ex pulvinar finibus. Suspendisse a mi ac augue dictum blandit. Donec malesuada convallis placerat. Integer et hendrerit tellus. Donec eu justo mattis, consectetur orci ac, posuere diam. Integer nec accumsan turpis. Ut quis dolor eu ante pulvinar iaculis cursus at quam. 
 
Donec laoreet facilisis sapien euismod finibus. Nam malesuada dapibus ex, sed rutrum tortor consequat in. Aenean quis elit dapibus, vestibulum massa nec, porta odio. Nam accumsan est sed velit scelerisque commodo. Morbi id massa quis lorem tristique convallis at vel leo. Aenean pharetra aliquam porta. Sed ac tellus rutrum, egestas leo sed, sagittis velit. Vestibulum et tellus arcu. 
 
Suspendisse imperdiet purus felis, at pharetra magna molestie at. Aenean non nibh sed ex laoreet tempor vel vel dui. Fusce ut arcu eget mi pulvinar molestie a ut metus. Etiam ex ante, volutpat ac leo convallis, venenatis sollicitudin lorem. Mauris tempor mollis euismod. Phasellus viverra dolor egestas turpis pulvinar, ac sollicitudin arcu facilisis. Sed viverra quam lectus, in fermentum libero vestibulum ac. Duis fringilla tempus dui, lobortis fringilla lacus volutpat quis. Nam iaculis nisl vitae mauris scelerisque, eget vulputate purus aliquet. Nullam dictum nunc a enim tempus, et fermentum lectus tristique. 
 
Nulla quis mattis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a elit nec ipsum accumsan cursus. Nunc vitae lorem a tellus aliquam luctus eu eget turpis. Vivamus dapibus elementum imperdiet. Nullam facilisis mauris ac tellus fringilla volutpat. Sed elementum ligula dolor, vitae tincidunt ligula ultrices in. 
 
\t \t \t </p>