[Solved] How to align images besides each other such that they get evenly distributed along the width of the page? [closed]


Something like this:

HTML

<div class="container">

    <figure>
      <img src="http://placehold.it/128x128">
      <figcaption>Caption 1</figcaption>
    </figure>

    <figure>
      <img src="http://placehold.it/128x128">
      <figcaption>Caption 2</figcaption>
    </figure>

    <figure>
      <img src="http://placehold.it/128x128">
      <figcaption>Caption 3</figcaption>
    </figure>

    <figure>
      <img src="http://placehold.it/128x128">
      <figcaption>Caption 4</figcaption>
    </figure>

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

CSS

body {margin:0;}
.container {}
figure { margin:0; width:25%; float:left; text-align: center; }

JSFiddle Demo

1

solved How to align images besides each other such that they get evenly distributed along the width of the page? [closed]