Skip to main content
J
joshw50886526
Participating Frequently
October 12, 2017
Answered

how to space 5 pictures evenly on 1 row?

  • October 12, 2017
  • 5 replies
  • 4274 views

I have 5 small pictures that all need to display symmetrically spaced on the same row of a page. Each picture will have one word printed beneath it representing the pictures. What is the best way to construct this setup as far as the div structure?

I assume create a table is not a good idea as this would not be a responsive design.

    This topic has been closed for replies.
    Correct answer pziecina

    You mean somethink like -

    http://www.pziecina.com/Adobe/lightbox/lightbox.html

    The above uses flexbox, but you can change how the images and captions are displayed, (number of, and alignment) just by using the flexbox alignment properties, and varying the way each element should grow/shrink using the flex-basis property.

    The article linked to by Jon, will give you the basics of using flexbox.

    5 replies

    O
    olus9720536
    Participant
    November 20, 2017

    So josh i guess your question has been answered, yea? Did you use flexbox or bootstrap? I am trying to solve the same issue here..

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    October 12, 2017

    If you're using a Bootstrap responsive layout, this is done very easily with an inline-list of images.

    <!doctype html>

    <html lang="en-US">

    <head>

    <meta charset="utf-8">

    <title>Bootstrap 3.3.7 Starter</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Latest compiled and minified Bootstrap CSS-->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    </head>

    <body>

    <h1 class="text-center">Bootstrap</h1>

    <div class="container">

    <div class="row">

    <!--Begin thumbnails-->

    <ul class="list-inline text-center">

    <li> <img class="img-thumbnail" src="https://placeimg.com/200/200/nature/1"><br>

    Caption</li>

    <li><img class="img-thumbnail" src="https://placeimg.com/200/200/nature/2"><br>

    Caption</li>

    <li><img class="img-thumbnail" src="https://placeimg.com/200/200/nature/3"><br>

    Caption</li>

    <li><img class="img-thumbnail" src="https://placeimg.com/200/200/nature/4"><br>

    Caption</li>

    <li><img class="img-thumbnail" src="https://placeimg.com/200/200/nature/5"><br>

    Caption</li>

    </ul>

    <!--/row--></div>

    <!--/container--></div>

    <!--latest jQuery 3-->

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <!--Bootstrap-->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </body>

    </html>

    If you want to expand this into an image viewer, see my tutorial below.

    Bootstrap Modal + Carousel Gallery - https://alt-web.com/

    Nancy

    Nancy O'Shea— Product User & Community Expert
    pziecina
    pziecina
    Legend
    October 12, 2017

    Forgot to add -

    If you use the html picture element, (or even just srcset) it is possible to display a different image depending on the size of the element in the viewport, using the media-query structure for those elements which are part of the html, (not css media-querys).

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    October 12, 2017

    CSS Flex would work well for this and is relatively easy to pick up if you already have a decent handle on CSS properties.

    Here's a quick tutorial...

    CSS3 Flexible Box

    pziecina
    pziecina
    Legend
    October 12, 2017

    What do you wish the images to do if the screen size becomes smaller, (or even larger) than the initial 5 images.

    Possibilities are -

    images automatically resize, (larger or smaller)

    images flow to another row

    number of images reduces/increases.

    You can do all of the above using css Flexbox, css grid layouts and 'old fashioned' float based css.

    Divs, articles, picture or some other element are all possible, as they are just the container and depending on how you wish the images to 'behave' as listed above will determine the type of css layout you can use.

    J
    joshw50886526Author
    Participating Frequently
    October 12, 2017

    If the screen size becomes smaller I would wish the images (and their caption underneath) resize as much as possible until there is not enough space and then they would go below to the next row and space out as much as possible evenly.

    pziecina
    pziecinaCorrect answer
    Legend
    October 12, 2017

    You mean somethink like -

    http://www.pziecina.com/Adobe/lightbox/lightbox.html

    The above uses flexbox, but you can change how the images and captions are displayed, (number of, and alignment) just by using the flexbox alignment properties, and varying the way each element should grow/shrink using the flex-basis property.

    The article linked to by Jon, will give you the basics of using flexbox.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices