Publicado em 6 de jul.

Alinhamento de DIVs, CSS

#css #desenvolvimento-frontend #alinhamento #div

bom dia galera,precisava de uma ajuda aqui, tenho essa parte no site onde o cliente cadastra seus trabalhos, a foto é ajustada via CSS, com o tamanho width: 320px sempre, porém o height fica conforme a foto que ele cadastra, para não distorcer a imagem, mas esta tudo ficando assim, desalinhado, queria que ficasse alinhado certinho, ja tentei varias coisas, e não da, alguém sabe alguma forma? Obrigado!

O CSS ESTA ASSIM:

.trabalho {
 float: left;
 margin-bottom: 10px;
 margin-left: 10px;
 width: 320px;
}

PRINT DO PROBLEMA:

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

L. Henrique· 6 de jul.

Gustavo,

Dê uma olhada nesse plugin: http://masonry.desandro.com - Uma pergunta... Você está utilizando Bootstrap? (creio que não, mas já deixo a pergunta ai).

Abraços!

lili_france· 6 de jul.

Faz um div com a img dentro, coloca ".trabalho" na div ao invés da img, daí vc tenta o seguinte:

.trabalho {
float: left;
margin-bottom: 10px;
margin-left: 10px;
width: 320px;

height: 200px;

overflow: hidden;

text-align: center;
}

.trabalho img {min-height: 100%;}

RoXbY· 7 de jul.

o segredo nesse caso é usar overflow, amigo.

Como a lili_france comentou, mas junto a ele deve-se utilizar o atributo height;

Portanto:

.trabalho {
 float: left;
 margin-bottom: 10px;
 margin-left: 10px;
 width: 320px;
 overflow:hidden;
 height:100px;
}