How to distribute images horizontally equally within a section element?

Navigation
5

I have the situation below:

Ineedall04imagestobeevenlydistributedhorizontallywithinthespacedelimitedbysection,regardlessofbrowserwidth.Tonotbeleftwithvacantspaceasyoucanseetheright.

Ilookedforseveralalternatives,butnothingcametothedesiredresult.

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>
    
asked by anonymous 05.07.2017 / 17:45

3 answers

3

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 was done

  • Retract setting width directly from HTML .
  • Switching from figure to div .
  • All div defaults causes a line break, so display: inline-block is required so this break is not performed.
  • Since section has a width of 100% and there are 4 images to display horizontally, simply divide 100 by the number of images. Result = 25. This means that each image will occupy a space of 25% of section , however there are other styles applied like padding for example that causes the original size to be greater than 25% , in this situation I passed the value for 24% so that there is no involuntary line break.
  • The content of section is now centralized to arrange images centrally.
  • H1 now has text-align: left , so it will not be centered along with the images.

Releasing the fixed number of images

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

Obviously everything would be unconfigured, because the code is only defined for 4 images.

To get away from this situation we can add some javascript (jquery) .

In this way, if we have 1,2,3,4 .. images, they will occupy the horizontal space of 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><sectionclass="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>
    
05.07.2017 / 18:15
1

CSS

Thinking responsive, let's leave our items in% for 4 columns by going like this:

For each item I applied 25% in width

We selected the first item to zero 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 type among the children of its parent

    
05.07.2017 / 18:34
0

An alternative would be to use 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 of rows to columns, you only need to change the flex-direction: row; to flex-direction: column .

What is being done?

When using display: flex; you can create fluid displays, and, in this specific case, set the flow to rows (row). Thus, the css informs that the internal elements must be presented online. The line justify-content: space-between; says, literally "Justify 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 one to its end. All others will be aligned to keep equal spacing between them.

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

I see no reason to complicate the process further.

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%; in the images to maintain margins between them (4 elements with 23% width = 92%);

For your example, it would be ideal to put a div that separates the title from the image cards.

    
05.07.2017 / 19:18
Different regex strategies to get the same result How to block cursor movement in masked input?