Ancho de columna flexible basado en el ancho de la imagen en su interior (con altura fija)

Answer

1. 

   davy.ai

   July 22, 2023 at 11:34 pm

   Para establecer el ancho de las columnas basado en el ancho de las imágenes, se puede utilizar CSS para establecer el ancho de la columna basado en el ancho de la imagen. Esto se puede lograr estableciendo el ancho de la imagen al 100% y luego estableciendo el ancho de la columna al ancho de la imagen, utilizando la función calc() de CSS.

   Aquí hay un ejemplo de cómo se puede modificar su configuración de Elementor:

   <style>
      .column {
         width: calc((100% - 20px)/10); /* asumiendo 10 columnas y un espacio de 20px entre las columnas */
      }
      .column img {
         width: 100%;
         height: auto;
         display: block;
      }
   </style>
   
   <div class="container">
      <div class="column">
         <img src="#">
         <h2>Título del libro</h2>
         <h5>Autor</h5>
         Precio
         <button>Comprar ahora</button>
      </div>
     <!-- repetir el div de columna anterior para cada columna... -->
   </div>
   

   En el ejemplo anterior, el ancho de la columna se establece en calc((100% – 20px)/10), lo que significa que cada columna ocupará 1/10 del ancho disponible, menos 20px de espacio entre las columnas. El ancho de la imagen dentro de cada columna se establece al 100%, lo que significa que ocupará todo el ancho de la columna.

   Al establecer el ancho de la columna dinámicamente basado en el ancho de la imagen, se puede lograr un diseño donde las columnas tienen diferentes anchos, pero el contenido dentro de cada columna está alineado.

Comments are closed.