Código del ejercicio CU01040D del curso CSS desde cero.
Código HTML:
<!DOCTYPE htlm>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="Portal web"/>
<meta name="keywords" content="programar,cursos"/>
<link rel="stylesheet" type="text/css" href="estilos72.css"/>
<title>Ejemplo text-align</title>
</head>
<body>
<div id="caja1"><p id="a">El div 1 debe tener alineación del texto centrada, color de texto #FF6347. Debe contener un texto suficientemente largo, con algunas <span>palabras subrayadas</span> y el primer párrafo indentado un 10%.</p><p>El div 1 debe tener alineación del texto centrada, color de texto #FF6347. Debe contener un texto suficientemente largo, con algunas <span>palabras subrayadas</span> y el primer párrafo indentado un 10%.</p></div>
<div id="caja2"><p id="c">El div 2 debe tener alineación del texto a la derecha,
color de texto #008080.
Debe contener un texto suficientemente largo, con algunas <span id="b">palabras subrayadas por encima</span>
y el primer párrafo indentado en 50 píxeles.</p>
<p>El div 2 debe tener alineación del texto a la derecha,
color de texto #008080.
Debe contener un texto suficientemente largo, con algunas <span id="b">palabras subrayadas por encima</span> y el primer párrafo indentado en 50 píxeles.</p></div>
<div id="caja3"><p id="e">El div 3 debe tener alineación del texto justificada, color de texto #8B4513. Debe contener un texto suficientemente largo, con algunas <span id="d">palabras tachadas</span>, y el primer párrafo indentado en un 20%.</p><p>El div 3 debe tener alineación del texto justificada, color de texto #8B4513. Debe contener un texto suficientemente largo, con algunas <span id="d">palabras tachadas</span>, y el primer párrafo indentado en un 20%.</p></div>
</body>
</html>
Código CSS: "estilos72.css"
div {
display: inline-block;
width: 200px;
height: 400px;
padding: 10px;
border-style: solid;
border-width: 4px;
font-size: 14px;
}
#caja1 {
text-align: center;
color: #FF6347;
}
#a {
text-indent: 10%;
}
span {
text-decoration: underline;
}
#caja2 {
text-align: right;
color: #008080;
white-space: pre-line;
}
#b {
text-decoration: overline;
}
#c {
text-indent: 50%;
}
#caja3 {
text-align: justify;
color: #8B4513;
white-space: pre-wrap;
}
#d {
text-decoration: line-through;
}
#e {
text-indent: 20%;
}
No entiendo por qué las cajas div no están alineadas.
Tema: Cajas div con display inline-block no se alinean verticalmente CU01040D CSS (Leído 3441 veces)
RSS -
WAP2