3 columns image layout with image text - html

Question

I need three columns of image layout with image text like this picture
its responsive, like below picture no border no background color, image text background color like this required, I'm new to css/html
I need three columns of image layout with image text like this picture
its responsive, like below picture no border no background color, image text background color like this required, I'm new to css/html
* {
box-sizing: border-box;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.figure {
border: thin #c0c0c0 solid;
display: flex;
flex-flow: column;
padding: 5px;
max-width: 220px;
margin: auto;
position: relative;
}
.imgdiv {
max-width: 220px;
max-height: 150px;
}
.figcaption {
background-color: pink;
color: #fff;
font: italic smaller sans-serif;
padding: 3px;
text-align: center;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 700px) {
.column {
width: 100%;
}
}
<h2>Responsive Three Column Layout</h2>
<p>Resize the browser window to see the responsive effect (the columns will stack on top of each other instead of floating next to each other, when the screen is less than 600px wide).</p>
<div class="row">
<div class="column" style="">
<figure>
<img class="column" src="image1.jpg" style="width:100%;height:100%;">
<figcaption>Register here</figcaption>
</figure>
</div>
<div class="column" style="background-color:#bbb;">
<h3>image 2</h3>
<p>Info 2</p>
</div>
<div class="column" style="background-color:#ccc;">
<h3>Publications</h3>
<p>Info 3</p>
</div>
</div>

Answer 1

Use flex and flex-direction
.row {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-end;
}
.column {
padding: 10px;
box-sizing: border-box;
}
img {
max-width: 100%;
}
.caption {
background-color: purple;
color: white;
/* padding: 0.1rem; */
}
.caption h3,
.caption p {
padding: 0.5rem;
margin: 0;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
<h2>Responsive Three Column Layout</h2>
<p>Resize the browser window to see the responsive effect (the columns will stack on top of each other instead of floating next to each other, when the screen is less than 600px wide).</p>
<div class="row">
<div class="column">
<div class="image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" alt="arctichare">
</div>
<div class="caption">
<h3>image 1</h3>
<p>Info 1</p>
</div>
</div>
<div class="column">
<div class="image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="airplane">
</div>
<div class="caption">
<h3>image 2</h3>
<p>Info 2</p>
</div>
</div>
<div class="column">
<div class="image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/baboon.png" alt="baboon">
</div>
<div class="caption">
<h3>Publications</h3>
<p>Info 3</p>
</div>
</div>