Question

我想使用figure和figcaption标签添加5张图片。我希望在页面上使用宽度45％显示2个图像。我做了2天，但第二张图片没有漂浮。

＆＃13;

Answer 1

 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>

带有图形标记的多个图像，每个图像的宽度为45％

1 个答案: