You can put pictures next to each other in CSS using several methods, but one traditional approach involves using the float
property.
Using the float
Property
The float
property lets you position elements (like images) side by side by floating them to the left or right.
Here's how you can do it:
-
Apply
float: left;
to each image: This will cause the images to align to the left and wrap next to each other.<img src="image1.jpg" style="float: left;"> <img src="image2.jpg" style="float: left;"> <img src="image3.jpg" style="float: left;">
-
Clear the float: After the images, you might need to clear the float to prevent subsequent elements from wrapping around the images. You can do this by adding an element with the
clear: both;
property.<div style="clear: both;"></div>
Example: Aligning Images Side by Side using float Property
<!DOCTYPE html>
<html>
<head>
<title>Align Images Side By Side</title>
<style>
img {
float: left;
margin-right: 10px; /* Optional: Add some spacing between images */
}
.clearfix {
clear: both;
}
</style>
</head>
<body>
<img src="image1.jpg" alt="Image 1" width="200" height="150">
<img src="image2.jpg" alt="Image 2" width="200" height="150">
<img src="image3.jpg" alt="Image 3" width="200" height="150">
<div class="clearfix"></div>
<p>This is some text that will appear below the images.</p>
</body>
</html>
In this example:
- Each
img
tag hasfloat: left;
applied to it. margin-right
adds some space between the images (optional)..clearfix
is a class used to clear the floats after the images.
By using the float
property, you can effectively display images next to each other in your CSS layout.