Imagens Lado a Lado, Fazer Colunas nos Gadgets.

Colocar as imagens ou textos lado a lado no gadget use o seguinte código:

<center>
<div style="float:left; width:33%">conteúdo aqui</div>
<div style="float:left; width:33%">conteúdo aqui</div>
<div style="float:left; width:33%">conteúdo aqui</div>
</center>

O valor 33 é utilizado porque são 3 colunas se usar outra quantidade e altere esse valor para que a soma seja algo próximo de 100 mas sem ultrapassar, por exemplo para duas colunas poderiamos usar 49 em cada uma delas.

Se depois de utilizar as 3 colunas quiser voltar a fazer uma coluna só acrescente essa linha no final <div style="clear:both">conteúdo aqui</div>, ficando deste jeito:

<center>
<div style="float:left; width:33%">conteúdo aqui</div>
<div style="float:left; width:33%">conteúdo aqui</div>
<div style="float:left; width:33%">conteúdo aqui</div>
<div style="clear:both">conteúdo aqui</div>
</center>

Nenhum comentário:

Postar um comentário