I need to make 4 thumbnails accompany the width of the screen.
Example:
DIV1 DIV2 DIV3 DIV4 They are one size X, horizontally in a row, taking up the full width of the screen.
I need to resize the screen, it still persists in 4 queued divs, with sizes proportional to that type of screen, and that fills the entire width.
In short, they should match the width of the screen.
How could I do this in Jquery or css?
You can do this as follows:
#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><liclass="item"><img src="http://lorempixel.com/400/200/city"/></li><liclass="item"><img src="http://lorempixel.com/400/200/food"/></li><liclass="item"><img src="http://lorempixel.com/400/200/people"/></li></ul>Inthiswayyoucanaddorremoveitemstothelist,whichwillautomaticallyadaptandadjustto100%ofthesizeofyourdivpai,withoutmakinganychangestotheCSScode,justaddorremoveonemoreitemtolist-<liclass="item"><img src="http://lorempixel.com/400/200/people"/></li>.
Here'sa example in jsFiddle to see this in action. Drag the result window, add / remove one or more items to the list.
<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?
See 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>