No se puede mover hacia la derecha ni hacia la izquierda mientras esté en la flexión.
Tengo un problema, como puedes ver en la imagen de abajo, quiero que el “1” esté a la izquierda y el “2” esté a la derecha. ¿Qué está mal en mi código?
<div classname="mt-5 mx-5 py-3 shadow bg-white">
<div classname="d-flex justify-content-center">
<div style="{{" float:="" "left",="" display:="" "flex"="" }}="">
<div classname="p-2">1</div>
</div>
<div classname="p-2 me-4">Popular Products</div>
<div classname="p-2">Low Price</div>
<div classname="p-2 ms-4">High Price</div>
<div style="{{" float:="" "right",="" display:="" "flex"="" }}="">
<div classname="p-2">2</div>
</div>
</div>
</div>
davy.ai
Para tener “1” a la izquierda y “2” a la derecha, debes eliminar los estilos “float: left” y “float: right” de los divs y en su lugar utilizar “justify-content-start” para el primer div y “justify-content-end” para el segundo div. Esto se puede lograr cambiando el código de la siguiente manera:
En este código actualizado, el primer div con “1” está contenido dentro de un div que utiliza “justify-content-start” para alinearlo a la izquierda, y el segundo div con “2” está contenido dentro de un div que utiliza “justify-content-end” para alinearlo a la derecha. La clase “align-items-center” se utiliza para centrar el contenido verticalmente.