+ 2

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

Web design

18th Mar 2019, 11:48 AM
INFINITรŽ๐ŸŒ€
INFINITรŽ๐ŸŒ€ - avatar
12 Answers
+ 10
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
18th Mar 2019, 12:56 PM
PanicS
PanicS - avatar
15th Apr 2019, 6:14 AM
PanicS
PanicS - avatar
+ 8
I know just @media, where you put custom style for width of devices. https://www.w3schools.com/csSref/css3_pr_mediaquery.asp
19th Mar 2019, 12:11 PM
PanicS
PanicS - avatar
+ 4
thanks~
16th Apr 2019, 12:33 AM
Gordon
Gordon - avatar
+ 3
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
15th Apr 2019, 12:27 AM
Decimis โ€  ๐•ฏ๐–Š๐–ˆ๐–Ž๐–’๐–Ž๐–˜
Decimis โ€  ๐•ฏ๐–Š๐–ˆ๐–Ž๐–’๐–Ž๐–˜ - avatar
+ 3
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
15th Apr 2019, 1:58 PM
Decimis โ€  ๐•ฏ๐–Š๐–ˆ๐–Ž๐–’๐–Ž๐–˜
Decimis โ€  ๐•ฏ๐–Š๐–ˆ๐–Ž๐–’๐–Ž๐–˜ - avatar
+ 3
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ีฒ ?
15th Apr 2019, 4:01 PM
Gordon
Gordon - avatar
+ 3
Gordon try body { margin: 0; } img { float: left; width:33.333vw; }
15th Apr 2019, 4:46 PM
Calviีฒ
Calviีฒ - avatar
15th Apr 2019, 5:08 PM
Gordon
Gordon - avatar
+ 3
Gordon this explains the gap https://developer.mozilla.org/en-US/docs/Archive/Misc_top_level/Images,_Tables,_and_Mysterious_Gaps
16th Apr 2019, 12:26 AM
Calviีฒ
Calviีฒ - avatar
+ 1
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)?
19th Mar 2019, 11:06 AM
INFINITรŽ๐ŸŒ€
INFINITรŽ๐ŸŒ€ - avatar
+ 1
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 ๐Ÿ˜
15th Apr 2019, 5:14 PM
Decimis โ€  ๐•ฏ๐–Š๐–ˆ๐–Ž๐–’๐–Ž๐–˜
Decimis โ€  ๐•ฏ๐–Š๐–ˆ๐–Ž๐–’๐–Ž๐–˜ - avatar