Results 1 to 2 of 2

Thread: Responsive Images with text

  1. #1
    Join Date
    Jul 2011

    Responsive Images with text


    Im looking to get 3 images in a row with text below them and when the page is resized it becomes 2 images in a row then 1 in a row.

    I was using column-count which worked great for just the images but with text it went a bit wrong at cetain width's.

    Can someone point me in the right direction of what to do?

  2. #2
    Join Date
    Mar 2011
    Generally, this is done by grouping the images and associated text in a containing block-level element like a <p> or <div>, set to "float:left". Then these images will be displayed horizontally until there is no longer sufficient space, at which point they'll start to be displayed in the next "row". Start with something like:
     .imgBox { float:left; width:31%; margin-left:1%; text-align:center; }
     .imgBox img { width:96%; }
    <div class="imgBox">
    <img src="image1.jpg"><br>
    Caption 1
    <div class="imgBox">
    <img src="image2.jpg"><br>
    Caption 2
    <div class="imgBox">
    <img src="image3.jpg"><br>
    Caption 3
    <div class="imgBox">
    <img src="image4.jpg"><br>
    Caption 4
    <br style="clear:left;">
    By setting the width to 31% here, I'm pretty much guaranteeing 3 images per row. If you used a fixed width, the number of images in each row will vary depending on the available space - which may also vary depending on the size/width of the window. The details will depend on exactly how you want everything to fit in your page.
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center