Вход | Регистрация | FAQ
Anonymous

Problemas con div

+ Ответить

Сообщений: 2 Страница 1 из 1


Problemas con div

davidgui » Пн окт 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 Кб) Скачиваний: 97

Аватара пользователя

davidgui

  • Сообщения: 1
  • Зарегистрирован: Пн окт 23, 2017 3:45 pm

Re: Problemas con div

nhadat180 » Вс ноя 05, 2017 2:35 am

hjjjjjjjjjjj
Аватара пользователя

nhadat180

  • Сообщения: 1
  • Зарегистрирован: Вс ноя 05, 2017 2:26 am
  • Откуда: phu quoc


+ Ответить

Страница 1 из 1