段落左侧的浮动图像（文本）

Question

I have an image that I need to float left and have the paragraph of text automatically show up on the right.

For instance:

<div class:"floated-image"><img src="img/fox.png" alt="Fox logo">
<p>The quick brown fox jumped over the log. <a>The fox is here.</a>
</p></div>

 .floated-image{
    float: left;
 }

Unfortunately, this is not working any ideas? I won't get my materials for school till Monday and I would like to work this out!! I've done everything else but this code and I have attempted to place the code within the paragraph. CSS:

Answer 1

<div class:"floated-image"> is wrong, <div class="floated-image"> is correct.

Use this code :

.floated-image img {
    float: left;
 }

 .floated-image img { float: left; width: 200px; } 

 <div class="floated-image"> <img src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg" alt="Fox logo"> <p>The quick brown fox jumped over the log. <a>The fox is here.</a></p> </div> 

IF you want .floated-image be floated too.

Use this code :

.floated-image {
    float: left;
    border: 1px solid;
 }

 .floated-image img {
    float: left;
    width: 200px;
 }

 .floated-image { float: left; border: 1px solid; } .floated-image img { float: left; width: 200px; margin-right:5px; } 

 <div class="floated-image"> <img src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg" alt="Fox logo"> <p>The quick brown fox jumped over the log. <a>The fox is here.</a></p> </div> 

Answer 2

Try this :

<img style="height: 200px; width: 200px; float: left;" src="https://developers.google.com/search/images/searchHome-Amp.svg" alt="Fox logo">


<p>The quick brown fox jumped over the log. <a>The fox is here.</a>
</p>

Answer 3

like this? it can be display flex , inline-flex , -webkit-box

  .floated-image { float: left; display:flex; } 

 <div class="floated-image"> <img src="https://static.xx.fbcdn.net/rsrc.php/v1/yi/r/odA9sNLrE86.jpg" alt="Fox logo"> <p>The quick brown fox jumped over the log. <a>The fox is here.</a> </p> </div>