تسجيل الدخول | التسجيل | الأسئلة المتكررة
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 KiB) 106 مرة

صورة العضو الشخصية

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