How to distribute images horizontally equally within a Section element?

Question

I have the situation below:

I need the 04 images to be distributed horizontally equally within the space bounded by section, independent of the width of the browser. Not to be left empty as can be seen on the right.

I looked for several alternatives, but nothing reached the desired result.

section.destaquestutisticos{
  float: left;
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin-top: 10px;
  border: 2px #FF8922 solid;
  box-sizing: border-box;
}

section.destaquestutisticos h1{
  font-size: 25px;
  padding-left: 15px;
  padding-top: 5px;
  color: #FF8922;
}

figure.destaquestutisticos_comidastipicas{
  float: left;
  width: 200px;
  height: 150px;
  padding: 10px;
  padding-bottom: 35px;
  font-size: 16px;

}
figure.destaquestutisticos_comidastipicas a{
  text-decoration: none;
  text-align: center;
  color:#222222;
}
figure.destaquestutisticos_comidastipicas{
  text-transform: uppercase;
}

<section class="destaquestutisticos">

    <h1>Destaques de Guarapari</h1>

        <figure class="destaquestutisticos_comidastipicas">
                <a href="comidas_tipicas.asp" title="Comidas típicas | Guarapari">
                <img src="http://via.placeholder.com/200x150" width="200" height="150" title="Comidas típicas | Guarapari">
                <figcaption>Comidas típicas</figcaption>
                </a>
        </figure>

        <figure class="destaquestutisticos_comidastipicas">
                <a href="parques.asp" title="Parques | Guarapari">
                <img src="http://via.placeholder.com/200x150" width="200" height="150" title="Parques | Guarapari">
                <figcaption>Parques</figcaption>
                </a>
        </figure>

        <figure class="destaquestutisticos_comidastipicas">
                <a href="praias.asp" title="Praias de Guarapari">
                <img src="http://via.placeholder.com/200x150" width="200" height="150" title="Praias de Guarapari">
                <figcaption>Praias</figcaption>
                </a>
        </figure>

        <figure class="destaquestutisticos_comidastipicas">
                <a href="turismo-rural-guarapari.asp" title="Turismo rural | Guarapari">
                <img src="http://via.placeholder.com/200x150" width="200" height="150" title="Turismo rural | Guarapari">
                <figcaption>Turismo rural</figcaption>
                </a>
        </figure>

    </section>

Answer 1

Come on,

section.destaquestutisticos{
  float: left;
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin-top: 10px;
  border: 2px #FF8922 solid;
  box-sizing: border-box;
  text-align: center;
}

section.destaquestutisticos h1{
  font-size: 25px;
  padding-left: 15px;
  padding-top: 5px;
  text-align: left;
  color: #FF8922;
}

.destaquestutisticos_comidastipicas{
  display: inline-block;
  width: 24%;
  position: relative;
  height: 150px;
  padding-bottom: 35px;
  font-size: 16px;
  

}

img{width: 100%;}

.destaquestutisticos_comidastipicas a{
  text-decoration: none;
  text-align: center;
  color:#222222;
}
.destaquestutisticos_comidastipicas{
  text-transform: uppercase;
}

<section class="destaquestutisticos">

    <h1>Destaques de Guarapari</h1>

        <div class="destaquestutisticos_comidastipicas">
                <a href="comidas_tipicas.asp" title="Comidas típicas | Guarapari">
                <img src="http://via.placeholder.com/200x150" width="" height="150" title="Comidas típicas | Guarapari">
                <figcaption>Comidas típicas</figcaption>
                </a>
        </div>
  
 <div class="destaquestutisticos_comidastipicas">
                <a href="parques.asp" title="Parques | Guarapari">
                <img src="http://via.placeholder.com/200x150" width="" height="150" title="Parques | Guarapari">
                <figcaption>Parques</figcaption>
                </a>
        </div>

        <div class="destaquestutisticos_comidastipicas">
                <a href="praias.asp" title="Praias de Guarapari">
                <img src="http://via.placeholder.com/200x150" width="" height="150" title="Praias de Guarapari">
                <figcaption>Praias</figcaption>
                </a>
        </div>

        <div class="destaquestutisticos_comidastipicas">
                <a href="turismo-rural-guarapari.asp" title="Turismo rural | Guarapari">
                <img src="http://via.placeholder.com/200x150" width="" height="150" title="Turismo rural | Guarapari">
                <figcaption>Turismo rural</figcaption>
                </a>
        </div>


       
    </section>

I believe that’s it.

What has been done

• Removed the definition width directly from HTML.
• Exchange of figure for div.
• All div pro pattern causes a line break, so it is necessary to display: inline-block so that this break is not realized.
• As the section has a width of 100% and are 4 images to be displayed horizontally, just divide 100 by the number of images. Result = 25. This means that each image will take up a space of 25% of section, however there are other styles applied as padding for example that makes the original size is larger than 25%, in this situation I passed the value to 24% so that there is no unintentional line break.
• The content of section becomes centralized to centrally arrange the images.
• H1 now you have text-align: left, so that it is not centered along with the images.

Detaching from the fixed number of images

We put a hypothetical situation that now section you will need to present more or less than only 4 images.

Obviously everything would be disfigured, because the code is set to only 4 images.

To escape from this situation we can add a little bit of javascript (jquery).

So if we have 1,2,3,4. images, they will occupy the horizontal space of the section without the line break.

Here is an example with only 2 images.

var qnt = $('.destaquestutisticos .destaquestutisticos_comidastipicas').length;

var result = 100/qnt;
result = result -1;

$('.destaquestutisticos_comidastipicas').css('width', result+'%');

section.destaquestutisticos{
  float: left;
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin-top: 10px;
  border: 2px #FF8922 solid;
  box-sizing: border-box;
  text-align: center;
}

section.destaquestutisticos h1{
  font-size: 25px;
  padding-left: 15px;
  padding-top: 5px;
  text-align: left;
  color: #FF8922;
}

.destaquestutisticos_comidastipicas{
  display: inline-block;
 
  position: relative;
  height: 150px;
  padding-bottom: 35px;
  font-size: 16px;
  

}

img{width: 100%;}

.destaquestutisticos_comidastipicas a{
  text-decoration: none;
  text-align: center;
  color:#222222;
}
.destaquestutisticos_comidastipicas{
  text-transform: uppercase;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<section class="destaquestutisticos">

    <h1>Destaques de Guarapari</h1>

        <div class="destaquestutisticos_comidastipicas">
                <a href="comidas_tipicas.asp" title="Comidas típicas | Guarapari">
                <img src="http://via.placeholder.com/200x150" width="" height="150" title="Comidas típicas | Guarapari">
                <figcaption>Comidas típicas</figcaption>
                </a>
        </div>
  
 <div class="destaquestutisticos_comidastipicas">
                <a href="parques.asp" title="Parques | Guarapari">
                <img src="http://via.placeholder.com/200x150" width="" height="150" title="Parques | Guarapari">
                <figcaption>Parques</figcaption>
                </a>
        </div>

     
       
    </section>

Answer 2

THE CSS

Thinking about the responsive, let’s leave our items in % for 4 columns following this way:

For each item I applied 25% in width

We select the first item to reset the margin using the ":first-of-type" selector.

section.destaquestutisticos{
  float: left;
  width: 100%;
  height: auto;
  margin-top: 10px;
  border: 2px #FF8922 solid;
  box-sizing: border-box;
}

section.destaquestutisticos h1{
  font-size: 25px;
  padding-left: 15px;
  padding-top: 5px;
  color: #FF8922;
}

figure.destaquestutisticos_comidastipicas{
float: left;
margin: 0 0 0 0;
display: inline-block;
width: 25%;
position: relative;

}

figure.destaquestutisticos_comidastipicas:first-of-type {
   margin-left: 0;
}

figure.destaquestutisticos_comidastipicas img {
   display: block;
   width: 100%;
   margin: 0 0 5px;
}

figure.destaquestutisticos_comidastipicas a{
  text-decoration: none;
  text-align: center;
  color:#222222;
}
figure.destaquestutisticos_comidastipicas{
  text-transform: uppercase;
}

<section class="destaquestutisticos">

<h1>Destaques de Guarapari</h1>

    <figure class="destaquestutisticos_comidastipicas">
            <a href="comidas_tipicas.asp" title="Comidas típicas | Guarapari">
            <img src="http://via.placeholder.com/200x150" width="200" height="150" title="Comidas típicas | Guarapari">
            <figcaption>Comidas típicas</figcaption>
            </a>
    </figure>

    <figure class="destaquestutisticos_comidastipicas">
            <a href="parques.asp" title="Parques | Guarapari">
            <img src="http://via.placeholder.com/200x150" width="200" height="150" title="Parques | Guarapari">
            <figcaption>Parques</figcaption>
            </a>
    </figure>

    <figure class="destaquestutisticos_comidastipicas">
            <a href="praias.asp" title="Praias de Guarapari">
            <img src="http://via.placeholder.com/200x150" width="200" height="150" title="Praias de Guarapari">
            <figcaption>Praias</figcaption>
            </a>
    </figure>

    <figure class="destaquestutisticos_comidastipicas">
            <a href="turismo-rural-guarapari.asp" title="Turismo rural | Guarapari">
            <img src="http://via.placeholder.com/200x150" width="200" height="150" title="Turismo rural | Guarapari">
            <figcaption>Turismo rural</figcaption>
            </a>
    </figure>

</section>

The pseudo-class :first-of-type represents the first element of its kind among the children of its parent element

Answer 3

An alternative would be to use the flex. As simple as:

section{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

<section>
  <img src='http://via.placeholder.com/150x150'>
  <img src='http://via.placeholder.com/150x150'>
  <img src='http://via.placeholder.com/150x150'>
  <img src='http://via.placeholder.com/150x150'>
</section>

So, if you want to change the display from rows to columns, you only need to change a flex-direction: row; for flex-direction: column.

What is being done?

When used display: flex; you can create fluid displays, and in this specific case, set the flow to lines (Row). Thus, the css informs that you must present the internal elements in line. The line justify-content: space-between; literally says "Justify the content by the space between it". In this way, the first item will be aligned to the beginning of the parent element and the last to its end. All others will be aligned to maintain equal spacing between them.

It would be ideal to keep the images relative size (using the units %, vh or vw) to ensure the responsiveness of the design.

I see no reason to further complicate the process.

However, this code will not work in older browsers.

Below, alternative with dynamic image size:

section{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

section img{
  width: 23%;
}

<section>
  <img src='http://via.placeholder.com/500x300'>
  <img src='http://via.placeholder.com/500x300'>
  <img src='http://via.placeholder.com/500x300'>
  <img src='http://via.placeholder.com/500x300'>
</section>

I used width: 23%; on the images to keep margins between them (4 elements 23% wide = 92%);

For your example, it would be ideal to put a div to separate title from picture cards.