Hi, I have a multiple-choice survey question which has three images and needs to be aligned with captions in the same row. I currently have the following html/css code to achieve this:
Html code in the question text:
<p>QUESTION TEXT?</p>
<div class="main>
<div class="pics3">
<figure>
<img src="..." style="width: 125px; height: 125px;" width="125" />
<figcaption style="text-align: center;">Grid-1</figcaption>
</figure>
</div>
<div class="pics3">
<figure>
<img src="..." style="width: 125px; height: 125px;" width="125" />
<figcaption style="text-align: center;">Grid-2</figcaption>
</figure>
</div>
<div class="pics3">
<figure>
<img src="..." style="width: 125px; height: 125px;" width="125" />
<figcaption style="text-align: center;">Grid-3</figcaption>
</figure>
</div>
</div>
CSS:
.main{
width: 100%;
padding: 5px 5px 5px 5px;
}
.main::after {
content: "";
clear: both;
display: table;
}
.pics3{
width: 33.33%;
height: 100px;
float: left;
}
However, this does not seem to work. Any pointers would be greatly appreciated! Thanks :D