Autor Tema: CSS alinear div a la derecha o izquierda con float y usar clear both CU01035D#  (Leído 36188 veces)

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Subo aquí los códigos del ejercicio CUO1035D del curso CSS desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos60.css"/>
<title>Ejemplo de float</title>
</head>
<body>
<div>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>
<div id="div6">div6</div>
<div id="div7">div7</div>
<div id="div8">div8</div>
<div class="limpiador"></div>
</div>
<div id="div9">Texto</div>
<div>
<div id="div10"></div>
<div id="div11"></div>
<div id="div12"></div>
</div>
<div id="div13">&lt;&lt;Curso CSS aprenderaprogramar.com&gt;&gt;</div>
</body>
</html>

Código CSS: "estilos60.css"

Código: [Seleccionar]
* {
font-family: arial;
}

div div {
width: 50px;
height: 50px;
margin-right: 5px;
border: solid;
}

#div1 {
background-color: red;
float: left;
}
#div2 {
background-color: blue;
float: left;
}

#div3 {
background-color: purple;
float: left;
}
#div4 {
background-color: grey;
float: left;
}
#div5 {
background-color: orange;
float: left;
}
#div6 {
background-color: pink;
float: left;
}
#div7 {
background-color: brown;
float: left;
}
#div8 {
background-color: green;
float: left;
}
.limpiador {
clear: both;
border: none;
height: 0;
}
#div9 {
background-color: yellow;
margin: 20px 0;
width: 100%;
}
#div10, #div11, #div12 {
width: 200px;
height: 50px;
margin-right: 5px;
float: right;
}
#div10 {
background-color: red;
}
#div11 {
background-color: blue;
}
#div12 {
background-color: yellow;
}
#div13 {
background-color: #DEB887;
clear: both;
width: 100%;
}

Como podemos observar, tanto en el #div9 como en el #div13 he establecido un valor de 100% en la propiedad "width". Esta propiedad sobra, porque por norma general el div es un elemento de tipo block y tiende a ocupar todo el ancho del elemento padre.
« Última modificación: 04 de Febrero 2020, 19:27 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2635
    • Ver Perfil
Buenas dimiste veo bien el código y haces exactamente lo que se pedía, perfecto!

Salu2

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".