CODEWITHSUNDEEP
cssreactjs
LiamGrossman
LiamGrossman

Reputation: 23

How to make my images inline to the left of my component content?

I have an image with details about it such as a title. Could anyone inform my how to make it inline and to the left of the other content? An image is attached to explain what I'm trying to do.

enter image description here

return (
    <div key={obj.employee}>
        <p>{obj.employee}</p>
        <p>{obj.favDog}</p>
        <img alt={obj.favDog} src={obj.img} />
    </div>
)

Upvotes: 0

Views: 39

Answers (2)

Alicia Sykes
Alicia Sykes

Reputation: 7127

Just add display: flex; to your outer container, and everything should fall in to place nicely!

Here is a Demo Fiddle

You can then add in margin, and the rest of your styles as you please.

If you want to learn more about flexbox, this is an excellent reference. There's also the MDN flexbox docs.

Upvotes: 2

morpheis camus
morpheis camus

Reputation: 1

you can use cssStyle to send your picture to left side.

float:left;
margin:10px;

that is enough to make your picture inline.

Upvotes: 0

Related Questions