0

Hola soy nuevo en la programación web, actualmente estoy practicando para mejorar. Me encuentro creando un diseño similar a este:

introducir la descripción de la imagen aquí

El problema radica en que no tengo idea de cómo puedo lograr colocar el elemento <p>$ Price</p> a la derecha del contenedor, similar a como aparece "$ 120,00" en la primer imagen. He intentado colocar justify-content: space-between pero los elementos permanecen en el mismo lugar. ¿Sera que le estoy errando al hacerlo con elementos de lista?

introducir la descripción de la imagen aquí

.container-orders {
  width: 100%;
  height: 100vh;
}
.container-orders ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.container-orders ul li {
  display: flex;
  align-items: center;
  margin: 20px 10px 20px 10px;
}

.container-orders .order-images {
  width: 100px;
  height: 100px;
  border-radius: 8px;
}
  <div class="container-orders">
  
<ul>
  <li class="list">
    <img src="./images-experiment/planta-1.jpg" alt="planta" class="order-images">
    <p> planta 1 </p>
    <p class="price"> $ price </p>
  </li>
  <li class="list">
    <img src="./images-experiment/planta-2.jpg" alt="planta" class="order-images">
    <p> planta 2 </p>
    <p class="price"> $ price </p>
  </li>
  <li class="list">
    <img src="./images-experiment/planta-3.jpg" alt="planta" class="order-images">
    <p> planta 3 </p>
    <p class="price"> $ price </p>
  </li>
  <li class="list">
    <img src="./images-experiment/planta-4.jpg" alt="planta" class="order-images">
    <p> planta 4 </p>
    <p class="price"> $ price </p>
  </li>
  <li class="list">
    <img src="./images-experiment/planta-5.jpg" alt="planta" class="order-images">
    <p> planta 5 </p>
    <p class="price"> $ price </p>
  </li>
  <li class="list">
    <img src="./images-experiment/planta-6.jpg" alt="planta" class="order-images">
    <p> planta 6 </p>
    <p class="price"> $ price </p>
  </li>
</ul>
  
</div>

1
  • Deberías poder hacerlo con space-between. Asegúrate de ponerlo en el padre y que tenga un tamaño definido y display: flex.
    – Mateo
    Commented el 22 ene. 2023 a las 18:13

1 respuesta 1

0

Lo podes hacer de la siguiente manera, cada 'list' (flex) tiene dos elementos, un contenedor 'contenedor-img_name' tambien flex con la foto y el nombre del producto, y otro que es el <p> del precio, ese 'list' tendra justify-content: space between para que el precio quede sobre la derecha y el contenedor img_name a la izquierda, después solo debo dar formato a este último con inline-flex y align-items: center para que la foto y el precio estén en el centro del cross-axis.

.container-orders {
  width: 100%;
  height: 100vh;
}
.container-orders ul {
   list-style: none;
   margin: 0px;
   padding: 0px;
}

.container-orders ul li{
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: 20px 10px 20px 10px;
}

.container-orders .order-images {
   width: 100px;
   height: 100px;
   border-radius: 8px;
}

.container-img_name{
  display: flex;
  justify-content: center;
  align-items: center;
}

.name{
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  margin-right: 10px;
}
<body>

  <div class="container-orders">
    <ul>
      <li class="list">
        <div class="container-img_name">
          <img src="https://picsum.photos/id/237/200/300" alt="planta" class="order-images">
          <p class="name"> planta 1 </p>
        </div>
        <p class="price"> $ price </p>
      </li>
      <li class="list">
        <div class="container-img_name">
          <img src="https://picsum.photos/id/237/200/300" alt="planta" class="order-images">
          <p class="name"> planta 2 </p>
        </div>
        <p class="price"> $ price </p>
      </li>
      <li class="list">
        <div class="container-img_name">
          <img src="https://picsum.photos/id/237/200/300" alt="planta" class="order-images">
          <p class="name"> planta 3 </p>
        </div>
        <p class="price"> $ price </p>
      </li>
      <li class="list">
        <div class="container-img_name">
          <img src="https://picsum.photos/id/237/200/300" alt="planta" class="order-images">
          <p class="name"> planta 4 </p>
        </div>
        <p class="price"> $ price </p>
      </li>
      <li class="list">
        <div class="container-img_name">
          <img src="https://picsum.photos/id/237/200/300" alt="planta" class="order-images">
          <p class="name"> planta 5 </p>
        </div>
        <p class="price"> $ price </p>
      </li>
      <li class="list">
        <div class="container-img_name">
          <img src="https://picsum.photos/id/237/200/300" alt="planta" class="order-images">
          <p class="name"> planta 6 </p>
        </div>
        <p class="price"> $ price </p>
      </li>
    </ul>
  </div>

</body>

Tome una imagen de internet para que se vea.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.