CSS (hojas de estilo en cascada) es un lenguaje de hojas de estilo utilizado para diseñar una página web para que sea atractiva. La razón para usar esto es simplificar el proceso de hacer que las páginas web estén presentables. Te permite aplicar estilos en las páginas web. Más importante aún, le permite hacer esto independientemente del HTML que conforma cada página web.
En este artículo, aprenderemos cómo puedo apilar dos imágenes de flecha (voto positivo/negativo) una encima de la otra usando CSS.
Propiedades utilizadas:
- display : esta propiedad se utiliza para especificar el comportamiento de visualización (el tipo de cuadro de representación) de un elemento.
- float : esta propiedad se usa para especificar si un elemento debe flotar a la izquierda, a la derecha o no flotar en absoluto.
- clear : esta propiedad se usa para controlar el flujo junto a los elementos flotantes.
Ejemplo: En este artículo, veremos cómo podemos apilar dos imágenes de flecha (voto positivo/voto negativo).
HTML
<!DOCTYPE html>
<html>
<head>
<title>
stack two arrow images (upvote/downvote) on top of eachother
</title>
<style>
img
{
width:150px;
margin-left:20px;
}
.vote
{
float: left;
clear: left;
}
.gfg img
{
display: block;
float: none;
clear: both;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<div class="gfg">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220529211152/up-300x300.png" />
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220529211152/down-300x300.png" />
</div>
</body>
</html>
Producción:
