How do i make a container that places images in the same line?

Question

Web design

Answer 1

Make container using <div> if you wont to style this container add id or class. And put all your images in that container, because <img> is inline element all picture will be in same line if width of all images is smaller than width of screen.
https://code.sololearn.com/W5Exqca0QksV/?ref=app

Answer 2

Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘 thanks for this example 😊

Answer 3

I know just @media, where you put custom style for width of devices. https://www.w3schools.com/csSref/css3_pr_mediaquery.asp

Answer 4

thanks~

Answer 5

Emmanuel🌀 You can use viewport units. What they do is adjust the size of units going by the size of the viewing area. Example:
Width: 30vw will size something to be 30% of whatever the view area's width is.
Height: 30vh will size something to be 30% of whatever the view area's height is.

See this modified example of Sanja Panic 's example code. All I did was change the width size for the 3 images to be 31vw. If you are using a phone and rotate it, you will see the size of the images change but still stay in a line across the screen.

Correction edit: viewport not view-point 😅

https://code.sololearn.com/WSMgP0GYFIKa/?ref=app

Answer 6

Sanja Panic Sure 👍

If someone wants to learn more, I learned it from Gordon 's most helpful tutorial codes:

https://code.sololearn.com/W3gS00IGw160/?ref=app

https://code.sololearn.com/WrgbrFC038ma/?ref=app

Answer 7

Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘 Nice explanation 👍👍👍

That word is viewport, I got corrected before on this too 😂

After browsing your example, I wonder why 33vw doesn't work. I tried margin 0 on body and it still exceeds 100vw.

https://code.sololearn.com/WO8y8rumq2KQ/?ref=app

What is that white space between the images, Calviղ ?

Answer 8

Gordon
try

body {
margin: 0;
}

img {
float: left;
width:33.333vw;
}

Answer 9

O.o magic?

https://code.sololearn.com/W7mVGG2d5gPM/?ref=app

Answer 10

Gordon this explains the gap
https://developer.mozilla.org/en-US/docs/Archive/Misc_top_level/Images,_Tables,_and_Mysterious_Gaps

Answer 11

But what if you want the images to stay in the container no matter what the size of the screen is (e.g.. opening your browser in a minimized window)?

Answer 12

Gordon 33vw was my first try also, lol. I saw that it didn't work and assumed it had something to do with margins/padding/whatever but I didn't have time to try to figure it out at the time and so I took the easy route and just set it to a lower number 😁