GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

Preciso colocar duas fotos uma ao lado da outra ,uma embaixo delas e uma no footer com 100% ,estou fazendo curso e não consigo


#1

.corpo-titulo {
margin: 0px;
margin-top: 10px;
padding: 10px;
margin-left: 10px;
color: white;
text-transform: uppercase;
justify-content: center;
text-align: center;
font-size: 25px;
font-family: sans-serif;
background-color: red;

}

.corpo-foto {
width: 48%;
height: 48%;
margin: 1%;

}
.corpo-foto-ft{

width: 48%;
height: 48%;
margin: 1%;

}
.Fotografias {
display: flex;
width: 50%;
height: 50%;
flex-direction: column;

}
.corpo {
position: absolute;
display: flex;
margin: 50px;
flex-flow: row ;
flex-flow: wrap;
}

.rodape {
background: /l(fotos/foto02.jpg) no-repeat center;/
background-size: cover;
width: 100%;
height: 35vh;
justify-content: flex-end;
align-self: flex-start;

}


#3

Eu não entendido muito bem a sua dúvida…
Para vc encaixar uma foto ao lado da outra elas devem estar em tamanhos que caibam lado a lado, ex: use a %, poderia ser cada foto de 50%, e ambas devem conter o display:inline ou display:inline-block;

.imgens-na-linha{
width:50%;
display:inline-block;
}
.imagem-abaixo{
width:100%;
}

dicas:

  • quando estiver determinando a largura não determine a altura senão sua foto pode ficar zuada e sair “esticada”
  • se vc esta usando o display flex, para usar as imagens na mesma linha tente usar o inline-flex (tem que buscar as variações para outros navegadores, webkit, ms, o…);
  • quando vc usa o position absolute, deve verificar se o elemento pai dele tem o position relative, além disso quando um elemento esta em absolute o pai deve ter um tamanho que o suporte, já que o pai não vai levar em consideração o elemento filho para determinar o seu tamanho;