I'm currently making a website involving images. I've used an image from https://plchldr.co/i/336x280?&bg=ffffff&text=. The code for the images is:
<div style = "padding: 20px 0px;">
<img class = "project" src = "https://plchldr.co/i/336x280?&bg=ffffff&text=">
</div>
<div style = "padding: 20px 0px;">
<img class = "project" src = "https://plchldr.co/i/336x280?&bg=ffffff&text=" >
</div>
<div style = "padding: 20px 0px;">
<img class = "project" src = "https://plchldr.co/i/336x280?&bg=ffffff&text=">
</div>
However, when I did this, the images vertically stacked, instead of stacking horizontally. I am using text-align: center;
for the entire body, but I don't think that should effect this. If you wish to see the website's code, it is at codeitfast.xyz
I have tried putting padding around the boxes. However, they have shadowing around them when I do this, and it looks quite bad (I'm using a box-shadow). I've also tried to add padding to divs. Neither of these have helped, and I'm open to most suggestions.
CodePudding user response:
DIV's are 100% wide by default, so you need to set the wrapping DIV's width, set them to inline-block so they will align horizontally, and then set the image's width relative the wrapper DIV's class.
<!doctype html>
<html lang="en">
<head>
<style>
.project{
width:100%;
}
.projectWrapper{
display:inline-block;
width:calc( 33% );
padding: 20px 0px;
}
</style>
</head>
<body>
<div >
<img class = "project" src = "https://plchldr.co/i/336x280?&bg=ff0000&text=">
</div>
<div >
<img class = "project" src = "https://plchldr.co/i/336x280?&bg=ffff00&text=" >
</div>
<div >
<img class = "project" src = "https://plchldr.co/i/336x280?&bg=000fff&text=">
</div>
</body>
</html>