Fri. Sep 29th, 2023

[ANSWERED] javascript – How to always make text and images on same line when resizing the window by using css?

By

Nov 20, 2022 css, html, javascript

Solution 1 :

I would use display:flex; for this:

*{
  box-sizing:border-box; padding:0; margin:0;
}
html,body{
  width:100%; height:100%; 
}
#flex{
  display:flex; align-items:center; padding:10px;
}
#icon{
  width:164px; height:164px;
}

<div id='flex'>
  <p id='para'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <img id='icon' src='https://i.stack.imgur.com/DvKY9.png?s=328&g=1' />
</div>

Problem :

Here is the effect I want

Hey, I am wondering how to position with text and images on same line only by using css? And if this is possible, how to always keep them on the same line when I am resizing the browser or using a different computer? Thank you!

Comments

Comment posted by StackSlave

Should that image stay the same size?

Comment posted by Keith

just use

Comment posted by Colette Ma

@Keith Hey I tried it. Images are responsive to both the width and height of the browser, whereas text is only responsive the browser height.

Comment posted by Colette Ma

@StackSlave It does not need to be the same size. As long as the image and text are on the same line

Comment posted by chris

another alternative is to use

By

Related Post

[ANSWERED] html – Child div has an offset border

Nov 20, 2022

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022

[ANSWERED] problem in selecting list item in html/css

Nov 20, 2022