Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde pessoal!
Novato em programação, estou tentando a dias alinhar essas imagens com css e bootstrap mas não esta funcionando, como esta no arquivo .png. Será que vocês conseguem me dar alguma dica de como alinhar essas imagens?
Quero fazer tipo um álbum de fotos para mim aprender, depois vou aprender o js e ficar testando.
Obrigado!
**As imagens não estão no mesmo tamanho, fiz meio rápido no fw sem observar os detalhes.
**Aos administradores do fórum, se eu estiver postando no lugar errado, me desculpem.
Eu não gosto da utilização do bootstrap então fiz sem para você estudar um pouco:
Ta bem cru pois dependendo da onde você usar, você tem que adaptar.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body {
background: #c1c1c1;
}
.linha img{
width: 100px;
height: 100px;
padding: 5px;
}
</style>
<body>
<content>
<div class="linha">
<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
</div>
<div class="linha">
<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
</div>
<div class="linha">
<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
</div>
<div class="linha">
<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
</div>
</content>
</body>
</html>Obrigado aphodi e public2004. estou usando a nova versão do bootstrap, vou procurar sobre a versao 3, ai talvez fique melhor de fazer. Obrigadoo :D
>
5 minutos atrás, leandrosv disse:
estou usando a nova versão do bootstrap, vou procurar sobre a versao 3, ai talvez fique melhor de fazer
Não faça isso. As diferenças de uso são sutis. Além disso com o exemplo do @Public2004 já deveria funcionar para você na v4.
Na versão 4 você também pode usar flexbox para isso: https://getbootstrap.com/docs/4.0/utilities/flex/
Mas no seu caso, eu ainda faria o layout sem nenhuma ferramenta, com o intuito de estudar HTML/CSS puros. Depois você volta para o Bootstrap.
hmmm, blz! Obrigado pela dica @Matheus Tavares. Vou começar então sem framework, aprender bem e depois passar para o frame!
Obrigado :D
Boas, com Bootstrap (v3.3.7) basicamente é isso: