How to create a div that contains multiple fixed-size images ?
What is a <div> tag ?
A <div> tag can be defined as a divider of two blocks of HTML code. It is used as a container for HTML elements which can then be styled with CSS or Javascript. Class or id attribute can be used to easily style the element in the <div> tag.
Please read more about <div> tag from this article : https://www.geeksforgeeks.org/div-tag-html/
An example on how to use a <div> tag:
HTML
<!DOCTYPE html><html> <head> <style> .firstDiv { border: 5px outset black; background-color: green; text-align: center; } </style></head> <body> <div class="firstDiv"> <h2>Hello Geek!</h2> <p>How was your day like?</p> </div></body> </html> |
Output:
Create a <div> that contains multiple fixed size images:
Approach:
- First, create the <div> tag as mentioned in the previous example and insert multiple images inside a common <div> tag so that all the images have a separate <div> tag and a class name.
- The following example shows how to make a <div> tag that contains multiple fixed-size images:
HTML
<!DOCTYPE html><html> <head> <style> .images { display: flex; flex-wrap: wrap; margin: 0 50px; padding: 30px; } .photo { max-width: 31.333%; padding: 0 10px; height: 240px; } .photo img { width: 100%; height: 100%; } </style></head> <body> <div class="images"> <div class="photo"> <img src="tom1.jpg" alt="photo" /> </div> <div class="photo"> <img src="tom2.jpg" alt="photo" /> </div> <div class="photo"> <img src="tom3.jpg" alt="photo" /> </div> </div></body> </html> |
Explanation: In the above code, we have created a main container <div> class of “images” which is used to store all the images and each image has its own container <div> class of “photo” which can be later used to add special CSS properties to the images.
Output:
Images shown are contained in <div> tag of class=”images”
Please Login to comment...