Entrar | Registrar | FAQ
Anonymous

Problemas con div

+ Postar uma resposta

2 Mensagens Página 1 de 1


Problemas con div

por davidgui » Seg Out 23, 2017 3:50 pm

Hola buenas. Estoy empezando con los divs y css y me estoy rompiendo la cabeza porque no soy capaz de hacer la imagen 1ª
Imagem
No me sale del todo, me falta poco, me sale esto:
Imagem
Aquí os dejo el código html con style en el head
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Pizarra</title>
<style>
#Amarillo {
border:1px solid black;
background-color: yellow;
margin-left: 50px;
margin-right: 50px;
height: 100px;
}
#Rojo {
border: 1px solid black;
background-color:red;
height: 500px;
width: 500px;
margin-left:100px;
margin-top:20px;
float:left
}
#Azul {
border: 1px solid black;
background-color:blue;
height: 500px;
width: 500px;
margin-right:100px;
margin-top:20px;
float: right
}
#Gris {
border: 1px solid black;
background-color: gray;
height: 100px;
margin-top: 540px;
margin-right: 300px;
margin-left: 50px;
}
#Rosa {
border: 1px solid black;
background-color: pink;
height: 100px;
width: 300px;
float:right;
}
</style>
</head>
<body>
<div id="Amarillo">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.
</p>
</div>
<div id="Rojo">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.
</p>
</div>
<div id="Azul">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.
</p>
</div>
<div id="Gris">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis
</p>
</div>
<div id="Rosa">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam amet voluptatem, rem harum illum suscipit ullam placeat animi aliquid cumque minima nobis quam ipsa hic
</p>
</div>
</body>
</html>

Anexos

  1. 2.PNG (144.19 KiB) Baixado 97 vezes

Avatar de usuário

davidgui

  • Mensagens: 1
  • Data de registro: Seg Out 23, 2017 3:45 pm

Re: Problemas con div

por nhadat180 » Dom Nov 05, 2017 2:35 am

hjjjjjjjjjjj
Avatar de usuário

nhadat180

  • Mensagens: 1
  • Data de registro: Dom Nov 05, 2017 2:26 am
  • Localização: phu quoc


+ Postar uma resposta

Página 1 de 1