Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

willwalker

CSS GRID com Javascript em Slider

Por , em Desenvolvimento frontend

Recommended Posts

willwalker    2

willwalker
Postado

Tenho um grid de tres colunas com width de 33%. E são elementos com float left dentro de um div com sua largura calculada em javascript para que esses elementos fiquem em 3 linhas e eu consiga alterar o left do div que agrupa todos.

 

O div que agrupa todos está com position relative e os grids com flot left dentro desse elemento.

 

Vejam como se encontra:

 

grid.jpg?1410186721

 

O que eu estou tento problema é em resoluções menores, ele vai calculando e as vezes sobra pixels na largura ficando assim:

 

grid.jpg?1410186900

 

Ou assim:

 

grid.jpg?1410187061

 

Segue o script, css e html:

var groups = 0, w = $("#pct_servicos .conteudo .row .col .groups").parent().width();
$("#pct_servicos .conteudo .row .col .groups .group .col").each(function(index, element) {
	groups += w/3;
});
	
$("#pct_servicos .conteudo .row .col .groups").css({ "width" : groups/3+"px" });
$("#pct_servicos .conteudo .row .col .groups .group").css({ "width" : ((groups/3)/3)+"px" });

.row .col { display: block; float: left; padding: 5px; height: 50px; line-height: 40px; }
#pct_servicos .conteudo .row .col .groups { display: block; height: 150px; }
#pct_servicos .conteudo .row .col .groups .group { float: left; height: 150px; }

<div class="row color_606060 padding_0_45">
	<a href="javascript: void(0);" class="arrow left icon-iconlayer-150-01 color_999999" data-direction="l"></a>
	<div class="col no_border_bottom width_100 padding_0" style="overflow: hidden; height: 150px;">
		<div class="groups">
			<div class="group">
				<div class="col no_border_bottom width_33 border_left border_top">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
				<div class="col no_border_bottom width_33 border_left border_top">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
				<div class="col no_border_bottom width_33 border_left border_top border_right">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
				<div class="col no_border_bottom width_33 border_left border_top">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
				<div class="col no_border_bottom width_33 border_left border_top">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
				<div class="col no_border_bottom width_33 border_left border_top border_right">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
				<div class="col width_33 border_left border_top">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
				<div class="col width_33 border_left border_top">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
				<div class="col width_33 border_left border_top border_right">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
			</div>
			
			<div class="group">
				<div class="col no_border_bottom width_33 border_left border_top">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
				<div class="col no_border_bottom width_33 border_left border_top">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
				<div class="col no_border_bottom width_33 border_left border_top border_right">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
				<div class="col no_border_bottom width_33 border_left border_top">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
				<div class="col no_border_bottom width_33 border_left border_top">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
				<div class="col no_border_bottom width_33 border_left border_top border_right">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
				<div class="col width_33 border_left border_top">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
				<div class="col width_33 border_left border_top">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
				<div class="col width_33 border_left border_top border_right">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
			</div>
			
			<div class="group">
				<div class="col no_border_bottom width_33 border_left border_top">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
				<div class="col no_border_bottom width_33 border_left border_top">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
				<div class="col no_border_bottom width_33 border_left border_top border_right">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
				<div class="col no_border_bottom width_33 border_left border_top">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
				<div class="col no_border_bottom width_33 border_left border_top">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
				<div class="col no_border_bottom width_33 border_left border_top border_right">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
				<div class="col width_33 border_left border_top">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
				<div class="col width_33 border_left border_top">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
				<div class="col width_33 border_left border_top border_right">
					<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
					<span class="icone backcolor_999999"></span>
					<div class="titval">
						<span class="titulo">Título</span>
						<span class="valor">R$ 1.000,00</span>
					</div>
					<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
				</div>
			</div>
		</div>
	</div>
	<a href="javascript: void(0);" class="arrow right icon-iconlayer-151-01 color_999999" data-direction="r"></a>
</div>

Estrutura mais simples do html:

<div class="col no_border_bottom width_100 padding_0" style="overflow: hidden; height: 150px;">
	<div class="groups">
		<div class="group">
			<div class="col no_border_bottom width_33 border_left border_top">
				<div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
				<span class="icone backcolor_999999"></span>
				<div class="titval">
					<span class="titulo">Título</span>
					<span class="valor">R$ 1.000,00</span>
				</div>
				<a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
			</div>
		</div>
	</div>
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

cara, não entendi.

 

pq vc calcula com javascript ? é um carousel horizontal, de 3 em 3 ?

pelo o que entendi, é possível fazer tudo apenas com css puro.

Compartilhar este post

Link para o post
Compartilhar em outros sites

willwalker    2

willwalker
Postado

Então me ajuda? Porque eu não consigo fazer o div que agrupa os grigs acompanhar a largura. Então uso javascript para colocar a largura inline (style) nesse div.

 

Se eu tiro o javascript, os elementos ficam um a baixo do outro, em vez de ficar um do lado do outro.

 

A largura desse div é exatamente a largura de cada grupo de divs.

 

O que eu gostaria de fazer era uma estrutura simples assim:

<div class="groups" style="display: block; width: 450px; overflow: hidden;"><!-- Esse div esse div fixo com overflow -->
	<div class="group" style="position: relative; height: 150px; left: 0px;"><!-- Esse div sempre aumentar de tamanho de acordo com os elementos children -->
		<div class="colunas" style="width: 33.33%; height: 50px; float: left;"></div>
		<div class="colunas" style="width: 33.33%; height: 50px; float: left;"></div>
		<div class="colunas" style="width: 33.33%; height: 50px; float: left;"></div>
		<div class="colunas" style="width: 33.33%; height: 50px; float: left;"></div>
		<div class="colunas" style="width: 33.33%; height: 50px; float: left;"></div>
		<div class="colunas" style="width: 33.33%; height: 50px; float: left;"></div>
		<div class="colunas" style="width: 33.33%; height: 50px; float: left;"></div>
		<div class="colunas" style="width: 33.33%; height: 50px; float: left;"></div>
		<div class="colunas" style="width: 33.33%; height: 50px; float: left;"></div>
	</div>
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito