登录 | 注册 | FAQ
Anonymous

Problemas con div

+ 发表回复

2 篇帖子 分页: 1 / 1


Problemas con div

davidgui » 周一 10月 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ª
图片
No me sale del todo, me falta poco, me sale esto:
图片
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>

附件

  1. 2.PNG (144.19 KiB) 被下载 108 次

头像

davidgui

  • 帖子: 1
  • 注册: 周一 10月 23, 2017 3:45 pm

Re: Problemas con div

nhadat180 » 周日 11月 05, 2017 2:35 am

hjjjjjjjjjjj
头像

nhadat180

  • 帖子: 1
  • 注册: 周日 11月 05, 2017 2:26 am
  • 地址: phu quoc


+ 发表回复

分页: 1 / 1