<img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/d1/d1a6cabea45b1f34f639b4f3dba8dd7af91072d4.jpg"><p>text 1</p> <p>text 2</p>
My text1 and text2 are going under the image but I didnt use <br>
tag.
Is there any way to do this: 'img here' 'text1' 'text2' ? Thanks.
You can use Following css for this
img, p {
display:inline-block;
}
Just add this to your css
img{ display:inline; } p{ display:inline; }
<img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/d1/d1a6cabea45b1f34f639b4f3dba8dd7af91072d4.jpg"><p>text 1</p> <p>text 2</p>
CSS property called display:inline
could be used !
<img src=".."/>
<p style="display:inline">text1</p>
<p style="display:inline">text1</p>
It is better to always use a class and assign your styles to the class rather than to an element directly. This gives you better control over which element to apply a particular style to.
.my-img,.text1,.text2 { display: inline-block; margin-right: 5px; }
<img class="my-img" src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/d1/d1a6cabea45b1f34f639b4f3dba8dd7af91072d4.jpg"><p class="text1">text 1</p> <p class="text2">text 2</p>
Float is the right way to do this.
img { float: left; padding-right:5px; }
<img src='http://placehold.it/220x220'> <p> Some text here. </p> <p> Some more text to follow. </p>
And this is not only my opinion. A quote from w3schools :
In its simplest use, the float property can be used to wrap text around images.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.