Here is the image.
I want to display two buttons, 'buy' and 'image' button, under each images. I want to use html.
<!DOCTYPE html>
<html>
<head>
<style>
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
</a>
<div class="desc"><button>Buy</button><button>Image</button></div>
</div>
<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
</a>
<div class="desc"><button>Buy</button><button>Image</button></div>
</div>
<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
</a>
<div class="desc"><button>Buy</button><button>Image</button></div>
</div>
<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
</a>
<div class="desc"><button>Buy</button><button>Image</button></div>
</div>
</body>
</html>
Related
I am trying to center my image gallery without decreasing the size of the images. I tried to work with some of the solutions in similar questions but they require making the images super small. Is there a way to keep the size of my images, have my images side by side, and just center the whole thing? :D Thanks so much in advance!
Here is my code:
<style>
div.gallery {
margin: 5px;
border: 0px solid #ccc;
float: left;
text-align: center;
width: 330px;
}
div.gallery:hover {
border: 0px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 9px;
text-align: center;
display: block;
margin: 0 auto;
}
</style>
<div id="container">
<div class="gallery">
<a target="_blank" href="img.jpg">
</a><a target="_blank" href="img.jpg"><img src="img.jpg" alt="Select Your Flavors" width="600" height="400">
</a>
<div class="desc"><h3>Choose Your Flavors</h3></div>
<div class="desc">
<p>Text</p>
<div class="center-section"><a class="btn button" href="https://completeats.myshopify.com/collections/shop">Find Your Box</a></div>
</div>
<p></p>
</div>
<div class="gallery">
<a target="_blank" href="img.jpg">
</a><a target="_blank" href="img.jpg"><img src="img" alt="Get Your Box" width="600" height="400">
</a>
<div class="desc"><h3>Get Your Box</h3></div>
<div class="center-section">
<a class="btn button" href="https://completeats.myshopify.com/collections/shop">Find Your Box</a><p></p>
</div>
</div>
<p></p>
</div>
<div class="gallery">
<a target="_blank" href="img.jpg">
</a><a target="_blank" href="img.jpg"><img src="img" width="600" height="400">
</a>
<div class="desc"><h3>text</h3></div>
<div class="center-section"><a class="btn button" href="">Shop Now</a></div>
</div>
<p></p>
</div></div>
i add "cover" your "gallery" div with "gallery-wrapper" class and add css for center image align.
.gallery-wrapper{
display:table;
margin:0 auto;
}
<style>
div.gallery {
margin: 5px;
border: 0px solid #ccc;
float: left;
text-align: center;
width: 330px;
}
div.gallery:hover {
border: 0px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 9px;
text-align: center;
display: block;
margin: 0 auto;
}
</style>
<div id="container">
<div class="gallery-wrapper">
<div class="gallery">
<a target="_blank" href="img.jpg">
</a><a target="_blank" href="img.jpg"><img src="https://images.unsplash.com/photo-1469317835793-6d02c2392778?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80" alt="Select Your Flavors" width="600" height="400">
</a>
<div class="desc"><h3>Choose Your Flavors</h3></div>
<div class="desc">
<p>Text</p>
<div class="center-section"><a class="btn button" href="https://completeats.myshopify.com/collections/shop">Find Your Box</a></div>
</div>
</div>
<div class="gallery">
<a target="_blank" href="img.jpg">
</a><a target="_blank" href="img.jpg"><img src="https://images.unsplash.com/photo-1469317835793-6d02c2392778?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80" alt="Get Your Box" width="600" height="400">
</a>
<div class="desc"><h3>Get Your Box</h3></div>
<div class="center-section">
<a class="btn button" href="https://completeats.myshopify.com/collections/shop">Find Your Box</a><p></p>
</div>
</div>
<div class="gallery">
<a target="_blank" href="img.jpg">
</a><a target="_blank" href="img.jpg"><img src="https://images.unsplash.com/photo-1469317835793-6d02c2392778?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80" width="600" height="400">
</a>
<div class="desc"><h3>text</h3></div>
<div class="center-section"><a class="btn button" href="">Shop Now</a></div>
</div>
</div>
like this :https://i.ibb.co/pzz0MxF/846c4b24-6934-4447-82c1-a25b11ea581c.png
Note: always use class name as section name like "club-works" for good css under standing
You have to add css in this class
.custom-html .custom-html__code {
display: table;
margin: 0 auto;
}
I am trying to create an image gallery, and I have the following styling:
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
I have the following HTML:
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here aaaa aaaa aaaa aaaa aa</div>
</div>
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
The output looks like this:
How do I make the fourth image go underneath the first image? Note that I theoretically don't know how long the description (text) will be, so I do not want to hard code a height for the image or div.
.row{
display:flex;
flex-wrap:wrap;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
flex-basis: calc(33.333333% - 15px);
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
<div class="row">
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="https://imgcomfort.com/Userfiles/Upload/images/illustration-geiranger.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here aaaa aaaa aaaa aaaa aa</div>
</div>
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="https://imgcomfort.com/Userfiles/Upload/images/illustration-geiranger.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="https://imgcomfort.com/Userfiles/Upload/images/illustration-geiranger.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="https://imgcomfort.com/Userfiles/Upload/images/illustration-geiranger.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
I'm writing some HTML pages for my personal website but I'm running into the problem that new elements aren't starting on a newline and rather starting to the right of a div containing a picture gallery.
this is easier shown than explained for me so here is a screenshot...
As you can see I want the circled elements below the gallery div
here is the code
<div id="gallerydiv">
<div class="gallery">
<a target="_blank" href="../AppDev images/java1.png">
<img src="../AppDev images/java1.png" alt="ToDo1" width="600" height="400"/>
</a>
<div class="desc">Application with basic functionality</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_10.png">
<img src="../AppDev images/Screenshot_10.png" alt="ToDo10" width="600" height="400"/>
</a>
<div class="desc">New file prompt</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_11.png">
<img src="../AppDev images/Screenshot_11.png" alt="ToDo11" width="600" height="400"/>
</a>
<div class="desc">File deletion prompt</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_12.png">
<img src="../AppDev images/Screenshot_12.png" alt="ToDo12" width="600" height="400"/>
</a>
<div class="desc">New ticket prompt</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_13.png">
<img src="../AppDev images/Screenshot_13.png" alt="ToDo13" width="600" height="400"/>
</a>
<div class="desc">Ticket deletion prompt</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_14.png">
<img src="../AppDev images/Screenshot_14.png" alt="ToDo14" width="600" height="400"/>
</a>
<div class="desc">Complete Ticket Prompt</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_1.png">
<img src="../AppDev images/Screenshot_1.png" alt="ToDo1" width="600" height="400"/>
</a>
<div class="desc">Adding some tickets to complete</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_2.png">
<img src="../AppDev images/Screenshot_2.png" alt="ToDo2" width="600" height="400"/>
</a>
<div class="desc">Completing tickets</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_3.png">
<img src="../AppDev images/Screenshot_3.png" alt="ToDo3" width="600" height="400"/>
</a>
<div class="desc">Complete section functional</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_4.png">
<img src="../AppDev images/Screenshot_4.png" alt="ToDo4" width="600" height="400"/>
</a>
<div class="desc">Ticket formatting complete</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_7.png">
<img src="../AppDev images/Screenshot_7.png" alt="ToDo7" width="600" height="400"/>
</a>
<div class="desc">Adding images for buttons</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_6.png">
<img src="../AppDev images/Screenshot_6.png" alt="ToDo6" width="600" height="400"/>
</a>
<div class="desc">Change directory dialog</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_9.png">
<img src="../AppDev images/Screenshot_9.png" alt="ToDo9" width="600" height="400"/>
</a>
<div class="desc">Finished product</div>
</div>
</div>
<div>
<p>Essentially how this app works is by storing the tickets in text files inside the working directory. Then by using tags similar to HTML the individual tickets can be pulled and stored.</p>
<br height="500px">
<h2>Advanced Youtube Search</h2>
</div>
and the styling...
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
height: 190px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
#gallerydiv {
width: 1000px;
margin: auto;
}
Ive already tried spamming br and setting the gallery width to 100% percent but nothing I have tried has worked obviously.
Try adding the same styles to the <p> and <h2> that were out of line. For example, in HTML:
<div class="unknown">
<p>Essentially how this app works is by storing the tickets in text files inside the working directory. Then by using tags similar to HTML the individual tickets can be pulled and stored.</p>
<br height="500px">
<h2>Advanced Youtube Search</h2>
</div>
CSS:
div.unknown {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
height: 190px;
}
That should work...
Add clearfix class to your div. This will move your next div to newline.
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
height: 190px;
border: 5px solid red;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
#gallerydiv {
width: 1000px;
margin: auto;
}
div.clearfix::after {
content: "";
clear: both;
display: table;
}
div.mydiv {
width: 1000px;
margin: auto;
}
<div id="gallerydiv" class="clearfix">
<div class="gallery">
<a target="_blank" href="../AppDev images/java1.png">
<img src="../AppDev images/java1.png" alt="ToDo1" width="600" height="400"/>
</a>
<div class="desc">Application with basic functionality</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_10.png">
<img src="../AppDev images/Screenshot_10.png" alt="ToDo10" width="600" height="400"/>
</a>
<div class="desc">New file prompt</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_11.png">
<img src="../AppDev images/Screenshot_11.png" alt="ToDo11" width="600" height="400"/>
</a>
<div class="desc">File deletion prompt</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_12.png">
<img src="../AppDev images/Screenshot_12.png" alt="ToDo12" width="600" height="400"/>
</a>
<div class="desc">New ticket prompt</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_13.png">
<img src="../AppDev images/Screenshot_13.png" alt="ToDo13" width="600" height="400"/>
</a>
<div class="desc">Ticket deletion prompt</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_14.png">
<img src="../AppDev images/Screenshot_14.png" alt="ToDo14" width="600" height="400"/>
</a>
<div class="desc">Complete Ticket Prompt</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_1.png">
<img src="../AppDev images/Screenshot_1.png" alt="ToDo1" width="600" height="400"/>
</a>
<div class="desc">Adding some tickets to complete</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_2.png">
<img src="../AppDev images/Screenshot_2.png" alt="ToDo2" width="600" height="400"/>
</a>
<div class="desc">Completing tickets</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_3.png">
<img src="../AppDev images/Screenshot_3.png" alt="ToDo3" width="600" height="400"/>
</a>
<div class="desc">Complete section functional</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_4.png">
<img src="../AppDev images/Screenshot_4.png" alt="ToDo4" width="600" height="400"/>
</a>
<div class="desc">Ticket formatting complete</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_7.png">
<img src="../AppDev images/Screenshot_7.png" alt="ToDo7" width="600" height="400"/>
</a>
<div class="desc">Adding images for buttons</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_6.png">
<img src="../AppDev images/Screenshot_6.png" alt="ToDo6" width="600" height="400"/>
</a>
<div class="desc">Change directory dialog</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_9.png">
<img src="../AppDev images/Screenshot_9.png" alt="ToDo9" width="600" height="400"/>
</a>
<div class="desc">Finished product</div>
</div>
</div>
<div class="mydiv">
<p>Essentially how this app works is by storing the tickets in text files inside the working directory. Then by using tags similar to HTML the individual tickets can be pulled and stored.</p>
<br height="500px">
<h2>Advanced Youtube Search</h2>
</div>
I would like to align my div boxes for a client's website all perfectly next to each other and without some being bigger than others. Here is the page relating to the code: https://www.imaniskinclinic.com/treatments
The boxes are not inline and some are obviously bigger than others. I added a div box container which I thought would hold the boxes more nicely but it doesn't seem to have worked.
Can anyone give me some assistance and guidance on what I must do?
Here is the code: CSS then HTML
.box {
background-color: white; /* for visualization purposes */
display: inline-block;
max-width: 100%;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
width: 200px;
height: 200px;
background: #f8abbe;
}
div.gallery:hover {
border: 1px solid #ffffff;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 10px;
text-align: center;
font-family : verdana, arial, helvetica, helve, sans-serif;
color: #ffffff;
}
<div class="box">
<div class="gallery">
<a href="aesthetics/acne.htm" >
<img src="images/acne.jpg" alt="Acne" width="300" height="200">
</a>
<div class="desc">Acne Treatments</div>
</div>
<div class="gallery">
<a href="aesthetics/hair%20removal.htm">
<img src="images/hairremoval.jpg" alt="Hair Removal" width="300" height="200">
</a>
<div class="desc">Laser Hair Removal</div>
</div>
<div class="gallery">
<a href="aesthetics/electrolysis.htm">
<img src="images/electrolysis.jpg" alt="Electrolysis" width="300" height="200">
</a>
<div class="desc">Electrolysis</div>
</div>
<div class="gallery">
<a href="aesthetics/thread%20veins.htm">
<img src="images/threadveins.jpg" alt="Thread Veins" width="300" height="200">
</a>
<div class="desc">Thread Veins</div>
</div>
<div class="gallery">
<a href="aesthetics/microderm.htm" >
<img src="images/microderm.jpg" alt="Microdermabrasion" width="300" height="200">
</a>
<div class="desc">Microdermabrasion</div>
</div>
<div class="gallery">
<a href="aesthetics/rosacea.htm" >
<img src="images/rosacea.jpg" alt="Rosacea" width="300" height="200">
</a>
<div class="desc">Rosacea</div>
</div>
<div class="gallery">
<a href="aesthetics/pigmentation.htm" >
<img src="images/pigmentation.jpg" alt="Pigmentation" width="300" height="200">
</a>
<div class="desc">Pigmentation</div>
</div>
<div class="gallery">
<a href="aesthetics/skin%20peels.htm" >
<img src="images/skinpeels.jpg" alt="Skin Peels" width="300" height="200">
</a>
<div class="desc">Skin Peels</div>
</div>
<div class="gallery">
<a href="aesthetics/botox_lipfillers.htm" >
<img src="images/botox.jpg" alt="Botox/Lipfillers" width="300" height="200">
</a>
<div class="desc">Botox & Lipfillers</div>
</div>
<div class="gallery">
<a href="aesthetics/semiperm.htm" >
<img src="images/microblading.png" alt="Semi Perm" width="300" height="200">
</a>
<div class="desc">Eyebrow Microblading & Semi-Permanent Make-up</div>
</div>
<div class="gallery">
<a href="aesthetics/mc.html" >
<img src="images/mc.jpg" alt="Massage and Cupping" width="300" height="200">
</a>
<div class="desc">Massage & Cupping</div>
</div>
</div>
Just added display: inline-block;
If you play a little bit with sizes of divs it will look better
.box {
background-color: white; /* for visualization purposes */
display: inline-block;
max-width: 100%;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
width: 200px;
height: 200px;
background: #f8abbe;
display: inline-block;
}
div.gallery:hover {
border: 1px solid #ffffff;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 10px;
text-align: center;
font-family : verdana, arial, helvetica, helve, sans-serif;
color: #ffffff;
}
<div class="box">
<div class="gallery">
<a href="aesthetics/acne.htm" >
<img src="images/acne.jpg" alt="Acne" width="300" height="200">
</a>
<div class="desc">Acne Treatments</div>
</div>
<div class="gallery">
<a href="aesthetics/hair%20removal.htm">
<img src="images/hairremoval.jpg" alt="Hair Removal" width="300" height="200">
</a>
<div class="desc">Laser Hair Removal</div>
</div>
<div class="gallery">
<a href="aesthetics/electrolysis.htm">
<img src="images/electrolysis.jpg" alt="Electrolysis" width="300" height="200">
</a>
<div class="desc">Electrolysis</div>
</div>
<div class="gallery">
<a href="aesthetics/thread%20veins.htm">
<img src="images/threadveins.jpg" alt="Thread Veins" width="300" height="200">
</a>
<div class="desc">Thread Veins</div>
</div>
<div class="gallery">
<a href="aesthetics/microderm.htm" >
<img src="images/microderm.jpg" alt="Microdermabrasion" width="300" height="200">
</a>
<div class="desc">Microdermabrasion</div>
</div>
<div class="gallery">
<a href="aesthetics/rosacea.htm" >
<img src="images/rosacea.jpg" alt="Rosacea" width="300" height="200">
</a>
<div class="desc">Rosacea</div>
</div>
<div class="gallery">
<a href="aesthetics/pigmentation.htm" >
<img src="images/pigmentation.jpg" alt="Pigmentation" width="300" height="200">
</a>
<div class="desc">Pigmentation</div>
</div>
<div class="gallery">
<a href="aesthetics/skin%20peels.htm" >
<img src="images/skinpeels.jpg" alt="Skin Peels" width="300" height="200">
</a>
<div class="desc">Skin Peels</div>
</div>
<div class="gallery">
<a href="aesthetics/botox_lipfillers.htm" >
<img src="images/botox.jpg" alt="Botox/Lipfillers" width="300" height="200">
</a>
<div class="desc">Botox & Lipfillers</div>
</div>
<div class="gallery">
<a href="aesthetics/semiperm.htm" >
<img src="images/microblading.png" alt="Semi Perm" width="300" height="200">
</a>
<div class="desc">Eyebrow Microblading & Semi-Permanent Make-up</div>
</div>
<div class="gallery">
<a href="aesthetics/mc.html" >
<img src="images/mc.jpg" alt="Massage and Cupping" width="300" height="200">
</a>
<div class="desc">Massage & Cupping</div>
</div>
</div>
I want to align the text on the right side of images. Below I pasted code of HTML and CSS. I am also pasting fiddle for that. Please find the link for fiddle also and let me know the solution. Thank you!
https://jsfiddle.net/yt4cxvLs/
<!DOCTYPE html>
<html>
<head>
<style>
div.img {
margin: 50px;
float: left;
width: 180px;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: left;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
Check this answer, as you can see, i just added "style=float" attribute in div element and separated </div> tag:
<!DOCTYPE html>
<html>
<head>
<style>
div.img {
margin: 50px;
float: left;
width: 180px;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: left;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
</a></div>
<div class="desc" style="float: right">Add a description of the image here</div>
<div class="img">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a></div>
<div class="desc" style="float: right">Add a description of the image here</div>
<div class="img">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a></div>
<div class="desc" style="float: right">Add a description of the image here</div>
<div class="img">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a></div>
<div class="desc" style="float: right">Add a description of the image here</div>
</html>
So the logic is -
Use a div as a parent container and place a and span for the text inside it
Make parent div, a and span as float:left'
.row {
float: left;
margin-right: 20px;
}
.row a {
float: left;
margin-right: 5px;
}
.row span {
float: right;
}
<div class="row">
<a href="#">
<img src="http://placehold.it/150">
</a>
<span>This is sample text</span>
</div>
<div class="row">
<a href="#">
<img src="http://placehold.it/150">
</a>
<span>This is sample text</span>
</div>
<div class="row">
<a href="#">
<img src="http://placehold.it/150">
</a>
<span>This is sample text</span>
</div>