如何创建侧面（左侧或右侧）具有适当间距的图像

Question

How can I copy the layout of this page?

I want to have an image with text on the right side of it but has to have a small space between them so they don't look too crowded and an image with text on the left. See sample page attached.

[Image] -space- [Text ]
[Text ] -space- [Image]
[Image] -space- [Text ]

Image With Text Page

Answer 1

This a link only answer, because the link describes it perfectly:

https://www.w3schools.com/Css/css_float.asp

The examples use CSS 'Flow' to flow the image left or right .

You can then use CSS margin or padding to create a distance between text and image.

Answer 2

Hi please use the power of flex for the equal size and spacing between the content.flex is very handy and easy to use. I hope it will work for you.

You can use the .my-space-between class for margin .

 .myflex{display:flex; justify-content:space-between; } .my-inner-item div{flex:1; } .my-space-between{flex:.1; } 

 <div class="myflex"> <div class="my-inner-item">my image will be here </div> <div class="my-space-between"></div> <div class="my-inner-item">my text will be here</div> </div> <div class="myflex"> <div class="my-inner-item">my image will be here </div> <div class="my-space-between"></div> <div class="my-inner-item">my text will be here</div> </div> <div class="myflex"> <div class="my-inner-item">my image will be here </div> <div class="my-space-between"></div> <div class="my-inner-item">my text will be here</div> </div>