www.webdeveloper.com
Results 1 to 2 of 2

Thread: Responsive Images with text

  1. #1
    Join Date
    Jul 2011
    Posts
    4

    Responsive Images with text

    Hi

    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
    Posts
    1,160
    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:
    Code:
    <style>
     .imgBox { float:left; width:31%; margin-left:1%; text-align:center; }
     .imgBox img { width:96%; }
    </style>
    <div class="imgBox">
    <img src="image1.jpg"><br>
    Caption 1
    </div>
    <div class="imgBox">
    <img src="image2.jpg"><br>
    Caption 2
    </div>
    <div class="imgBox">
    <img src="image3.jpg"><br>
    Caption 3
    </div>
    <div class="imgBox">
    <img src="image4.jpg"><br>
    Caption 4
    </div>
    <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.

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



Recent Articles