Place three images with captions in the question text of a multiple choice question. | XM Community
Skip to main content

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

I have done this without using any code.  Is there another reason why you are using code?

 

Assuming you have 3 horizontal options and want to align them with three image caption. The approach would be to use rich content editor of the question text and create table with 100% width. Now place three table data (td) tag under a table row (tr) element each with width 100/3%

Sorry I missed the part about it being in the question text.  I agree with Shashi. 

Thanks a lot! The layout with tables is much cleaner 🙂 And resolved the issue.

Leave a Reply


Terms & Conditions