CODEWITHSUNDEEP
css
Iffy
Iffy

Reputation: 79

multiple images with figure tag with 45% width each images

I want add 5 images using figure and figcaption tag. I want show 2 images on page using width 45%. I am doing for 2 days but 2nd image not floating left.

figure {
  margin: 0;
  float: left;
}

.container img {
  width: 45%;
}

figcaption {
  width: 30%;
  float: left;
  clear: right;
  display: inline;
}

.clearfix::after {
  content: “”;
  display: table;
  clear: both;
}
<div class="container clearfix">
  <figure class="imgcol">
    <figcaption> Experimentation with color and texture. </figcaption>
    <img src="" alt="Irfan Web Developer" />

    <figcaption> Playing with blending mode in photoshop. </figcaption>
    <img src="" alt="Irfan Web Developer" />

    <figcaption> Trying to create 80's style glow. </figcaption>
    <img src="" alt="Irfan Web Developer" />

    <figcaption> Drips created using Photoshop brushes </figcaption>
    <img src="" alt="Irfan Web Developer" />

    <figcaption> Creating shapes using repetition. </figcaption>
    <img src="" alt="Irfan Web Developer" />
  </figure>
</div>

Upvotes: 3

Views: 3577

Answers (1)

yjs
yjs

Reputation: 692

 figure {
    margin: 0;
    float: left;
    width:45%;
 }

 .container img {
    max-width:100%;
}

figcaption {
    clear: right;
    display: block;
}

.clearfix::after {
    content: “”;
    display: table;
    clear: both;
}
<div class="container clearfix">
    <figure class="imgcol"> 
        <figcaption> Experimentation with color and texture. </figcaption> 
        <img src="https://i.imgur.com/0Yvihcj.gif" alt="Irfan Web Developer" />
    </figure>
        	
    <figure class="imgcol"> 
         <figcaption> Playing with blending mode in photoshop. </figcaption>
         <img src="https://i.imgur.com/0Yvihcj.gif" alt="Irfan Web Developer" />
    </figure>
        	
    <figure class="imgcol"> 
         <figcaption> Trying to create 80's style glow. </figcaption>
        	<img src="https://i.imgur.com/0Yvihcj.gif" alt="Irfan Web Developer" />
    </figure>
        	
    <figure class="imgcol"> 
        	<figcaption> Drips created using Photoshop brushes </figcaption> 
        	<img src="https://i.imgur.com/0Yvihcj.gif" alt="Irfan Web Developer" />
    </figure>
 </div>

Upvotes: 1

Related Questions