Stack Overflow em Português Asked by Niko on January 15, 2021
Estou fazendo o esboço de um projeto e preciso colocar três imagens um uma “linha” só. Decidi usar o display:flex
e o space-around
para deixa-lás com um espaço entre elas, porém elas estão no tamanho fora do normal.
HTML:
<header id="infos">
<div class="logos">
<img src="http://3.bp.blogspot.com/-ELX7vcLVocE/Ubj2DSqw-1I/AAAAAAAACJs/rfJ2ZbWWbOs/s1600/5o.JPG" width="200"/>
<img src="http://3.bp.blogspot.com/-ELX7vcLVocE/Ubj2DSqw-1I/AAAAAAAACJs/rfJ2ZbWWbOs/s1600/5o.JPG" width="200"/>
<img src="http://3.bp.blogspot.com/-ELX7vcLVocE/Ubj2DSqw-1I/AAAAAAAACJs/rfJ2ZbWWbOs/s1600/5o.JPG" width="200"/>
</div>
</header>
e o CSS:
*{margin: 0; padding: 0; box-sizing: border-box;}
body{
background-color:rgba(127,255,30, 1);
font-size: 18px;
overflow-x: hidden;
}
#infos{
max-width: 960px;
padding: 3em;
margin: 0 auto;
}
.logos{
display: flex;
justify-content: space-between;
}
queria que elas ficassem no seu tamanho normal
Você pode aplicar na imagem
align-self: flex-start;
Dessa forma o flex não vai distorcer.
Answered by Hilso Vasques Junior on January 15, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP