Jump to content

card empurra o componente pra fora


Mr_Galvao

Postagens Recomendadas

Então pessoal, estava no meio dos meus estudos de html, css e JS e decidi fazer um mini calculador de imc. Durante o desenvolvimento do mesmo, me vi confuso com algo, eu decidi desenvolver o conteúdo em um card e separar ele em dois extremos (direita e esquerda) e assim organizar tudo. Mas quando eu fui definir a largura e altura de um dos extremos, que no caso é uma <div>,  ele simplesmente saia do card, mesmo estando interno a ele no html. Segue os arquivos html e css, se alguém conseguir me ajudar a entender o que está havendo, agradeço de coração.

style.cssindex.html

Editado por Mr_Galvao
Link to comment
Compartilhe em outros sites

Opa, dei uma olhada no código e parece que o problema está na classe:

.left-card {
    height: 100%;
  ...
}

Com height de 100% o card da esquerda vai empurrar quaisquer outros elementos para fora do card.

Além disso, o elemento card está com orientação vertical fazendo que o right-card esteja abaixo de left-card.

Para corrigir isso você pode utilizar:

.card {
    display: flex;
	...
}

Essa documentação explica melhor os conceitos de flexbox e pode lhe ajudar a posicionar os elementos como precisa.

  • Amei 1
Link to comment
Compartilhe em outros sites

21 minutos atrás, Kleverson Cruz disse:

Opa, dei uma olhada no código e parece que o problema está na classe:

.left-card {
    height: 100%;
  ...
}

Com height de 100% o card da esquerda vai empurrar quaisquer outros elementos para fora do card.

Além disso, o elemento card está com orientação vertical fazendo que o right-card esteja abaixo de left-card.

Para corrigir isso você pode utilizar:

.card {
    display: flex;
	...
}

Essa documentação explica melhor os conceitos de flexbox e pode lhe ajudar a posicionar os elementos como precisa.

Realmente era isso, obrigado por disponibilizar um pouco do seu tempo pra me ajudar, tmjt man! ❤️

  • Amei 1
Link to comment
Compartilhe em outros sites

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora


×
×
  • Create New...