Note that in the code below I have several div with a "responsive" class, there is some way to be separating the first horizontal column from the second, as the boxes are very close to each other. And in the field that has the text in the images, it has a lot of spaces up and down, how can I adjust?
I'm learning and I don't know much about technical terms in HTML.
div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
#media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Responsive Image Gallery</h2>
<h4>Resize the browser window to see the effect.</h4>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="https://thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-it%C3%A1lia-de-manarola-terre-de-cinque-75217403.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="https://thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-it%C3%A1lia-de-manarola-terre-de-cinque-75217403.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="https://thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-it%C3%A1lia-de-manarola-terre-de-cinque-75217403.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="https://thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-it%C3%A1lia-de-manarola-terre-de-cinque-75217403.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="https://thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-it%C3%A1lia-de-manarola-terre-de-cinque-75217403.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="https://thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-it%C3%A1lia-de-manarola-terre-de-cinque-75217403.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="https://thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-it%C3%A1lia-de-manarola-terre-de-cinque-75217403.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="https://thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-it%C3%A1lia-de-manarola-terre-de-cinque-75217403.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="clearfix"></div>
<div style="padding:6px;">
<p>This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller
than 500px, the images will stack vertically (100%).</p>
<p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
</div>
</body>
</html>
You can add more space beneath the boxes by adding some margin-bottom to your responsive class:
.responsive {
margin-bottom: 30px; /* Adjust accordingly */
}
You can also reduce the amount of space above and below the text by adjusting the padding for your desc class:
div.desc {
padding: 5px; /* Adjust accordingly */
}
Related
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 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>
so I'm very rusty on html and css. I'm currently working on a project for school. I've created all the css properties for my 10 photos to do what I want them to do (border changes color when scrolled over). However, for the life of me, I can't figure out how to center the images. I'm trying to center three images per line, with one extra image. Any suggestions would be greatly appreciated. Again, I'm really rusty so it might be a simple fix.
div.gallery {
margin: 5px;
border: 5px solid white;
float: left;
width: 400px;
}
div.gallery:hover {
border: 5px solid yellow;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
a.ex1:hover,
a.ex1:active {
color: yellow;
}
a.ex2:hover,
a.ex2:active {
color: yellow;
}
a.ex3:hover,
a.ex3:active {
color: yellow;
}
a.ex4:hover,
a.ex4:active {
font-size: 200%;
color: yellow;
}
img {
text-align: center;
}
<h1 class="work1">
<center><a class="ex1">Photography Assignment</a></center>
</h1>
<center>
<div class="gallery">
<a target="_blank" href="images/SS1.png">
<img src="images/SS1.png" alt="Margaret's bag" height="200" width="300">
</a>
<div class="desc">An extreme close up of Margaret's bag</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS2.png">
<img src="images/SS2.png" alt="Margaret's notes" height="200" width="300">
</a>
<div class="desc">A picture of Margaret's bag</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS3.png">
<img src="images/SS3.png" alt="Close up of Margaret's face" height="200" width="300">
</a>
<div class="desc">A close up of Margaret against a pink house</div>
</div>
<br>
<br>
</center>
<div class="gallery">
<a target="_blank" href="images/SS4.png">
<img src="images/SS4.png" alt="A medium shot of Margaret" height="200" width="300">
</a>
<div class="desc">A medium shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS5.png">
<img src="images/SS5.png" alt="A medium long shot of Margaret" height="200" width="300">
</a>
<div class="desc">A medium long shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS6.png">
<img src="images/SS6.png" alt="A long shot of Margaret in motion" height="200" width="300">
</a>
<div class="desc">A long shot of Margaret in motion</div>
</div>
<br>
<div class="gallery">
<a target="_blank" href="images/SS7.png">
<img src="images/SS7.png" alt="A upward medium shot of Margaret" height="200" width="300">
</a>
<div class="desc">An upward medium shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS8.png">
<img src="images/SS8.png" alt="A telephoto shot of a sunflower with Margaret in the background" height="200" width="300">
</a>
<div class="desc">A telephoto shot of a sunflower with Margaret in the background</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS9.png">
<img src="images/SS9.png" alt="A telephoto shot of Margaret" height="200" width="300">
</a>
<div class="desc">A telephoto shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS10.png">
<img src="images/SS10.png" alt="A wide shot of Margaret getting into a firetruck" height="200" width="300">
</a>
<div class="desc">A wide shot of Margaret</div>
</div>
<br>
<h1>
<center><a class="ex1">Poster Assignment</a></center>
</h1>
As i can not post a comment so , You can add following to the img tag or you can use a class name using ' . '
img {
display: inline-flex;
margin : 0 auto;
}
Just add text-aling: center to your gallery class.
You also can do it in other ways (such as flexbox), but here is the easiest way.
Hope it will help.
.gallery {
margin: 5px;
border: 5px solid white;
float: left;
width: 400px;
text-align: center;
}
.gallery:hover {
border: 5px solid yellow;
}
.gallery img {
max-width: 100%;
height: auto;
}
.desc {
padding: 15px;
text-align: center;
}
a.ex1:hover,
a.ex1:active {
color: yellow;
}
a.ex2:hover,
a.ex2:active {
color: yellow;
}
a.ex3:hover,
a.ex3:active {
color: yellow;
}
a.ex4:hover,
a.ex4:active {
font-size: 200%;
color: yellow;
}
<h1 class="work1">
<center><a class="ex1">Photography Assignment</a></center>
</h1>
<div class="gallery">
<a target="_blank" href="images/SS1.png">
<img src="images/SS1.png" alt="Margaret's bag" height="200" width="300">
</a>
<div class="desc">An extreme close up of Margaret's bag</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS2.png">
<img src="images/SS2.png" alt="Margaret's notes" height="200" width="300">
</a>
<div class="desc">A picture of Margaret's bag</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS3.png">
<img src="images/SS3.png" alt="Close up of Margaret's face" height="200" width="300">
</a>
<div class="desc">A close up of Margaret against a pink house</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS4.png">
<img src="images/SS4.png" alt="A medium shot of Margaret" height="200" width="300">
</a>
<div class="desc">A medium shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS5.png">
<img src="images/SS5.png" alt="A medium long shot of Margaret" height="200" width="300">
</a>
<div class="desc">A medium long shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS6.png">
<img src="images/SS6.png" alt="A long shot of Margaret in motion" height="200" width="300">
</a>
<div class="desc">A long shot of Margaret in motion</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS7.png">
<img src="images/SS7.png" alt="A upward medium shot of Margaret" height="200" width="300">
</a>
<div class="desc">An upward medium shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS8.png">
<img src="images/SS8.png" alt="A telephoto shot of a sunflower with Margaret in the background" height="200" width="300">
</a>
<div class="desc">A telephoto shot of a sunflower with Margaret in the background</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS9.png">
<img src="images/SS9.png" alt="A telephoto shot of Margaret" height="200" width="300">
</a>
<div class="desc">A telephoto shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS10.png">
<img src="images/SS10.png" alt="A wide shot of Margaret getting into a firetruck" height="200" width="300">
</a>
<div class="desc">A wide shot of Margaret</div>
</div>
<br>
<h1>
<center><a class="ex1">Poster Assignment</a></center>
</h1>
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>
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>