Align 4 Ivs always horizontally, with size proportional to screen size

Asked

Viewed 639 times

1

I need to make 4 thumbnails track the width of the screen.

Example:

DIV1 DIV2 DIV3 DIV4 They are with a size X, horizontal in a row, picking up the whole width of the screen.

I need to resize the screen, the same still persists in 4 row Ivs, with proportional sizes for that type of screen, and fill the whole width.

In short, they should follow the width of the screen.

How could I do this in Jquery or css?

javascript jquery css
  • 2

    vc can use bootstrap? If so, simply set the Divs with the class 'col-Md-3': https://getbootstrap.com/examples/grid/

  • You could put the code snippet in HTML, CSS and jquery so experts can help?

  • Bootstrap in that case is the best solution.

3 answers

1


You can do it this way:

#listaHorizontal {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: table;              /* Transforma a div numa tabela */
    table-layout: fixed;         /* Utiliza o algoritmo de uma table fixed */
    border-collapse: separate;   /* Colapsa a tabela para poder adicionar o espaçamento */
    border-spacing: 5px 0px;     /* Adiciona o espaçamento */
}

/* Cria uma lista horizontal com espaçamento */
.item {display: table-cell;}
.item img{width:100%;}
<ul id="listaHorizontal">
    <li class="item"><img src="http://lorempixel.com/400/200/sports"/></li>
    <li class="item"><img src="http://lorempixel.com/400/200/city"/></li>
    <li class="item"><img src="http://lorempixel.com/400/200/food"/></li>
    <li class="item"><img src="http://lorempixel.com/400/200/people"/></li>
</ul>

This way you can add or remove items to the list, which will automatically adapt and adjust to 100% the size of your div pai, without having to make any changes to the CSS code, just add or remove one more item to the list - <li class="item"><img src="http://lorempixel.com/400/200/people"/></li>.

Here’s a example in jsFiddle to better see this in action. Drag the output window, add/remove one or more items to the list.

  • 1

    Good! I did it! It was just that! Thank you!

0

<div class="x">
    <div class="DIVV">
    </div>
    <div class="DIVV">
    </div>
    <div class="DIVV">
    </div>
    <div class="DIVV">
    </div>
</div>

.x {
width: 100%;
}
.DIVV {
width: 25%;
}

Would that be?

0

Look at this:

.tbl {
  display: table;
  width: 100%;
}
.row {
  display: table-row;
}
.cel {
  display: table-cell;
}
div {
  border: 1px solid;
}
<div class="tbl">
  <div class="row">
    <div class="cel">1
    </div>
    <div class="cel">2
    </div>
    <div class="cel">3
    </div>
    <div class="cel">4
    </div>
  </div>
</div>

Browser other questions tagged javascript jquery css

You are not signed in. Login or sign up in order to post.