1

Tengo el siguiente código en HTML en donde quiero mostrar un catálogo de productos de 4 columnas y n filas- Todo está muy bien y funciona pero cuando el nombre del producto es demasiado largo la tabla empieza a ir hacia abajo y a estirarse y descordina de las otras.

introducir la descripción de la imagen aquí

    <div style="overflow-x:auto;">
    <div style="overflow-x:auto;">
    <table class="table table-condensed" style="border-spacing: 5px;">
    @{ var itemCount = 0;}
    @foreach (var item in Model)
    {
    if (!string.IsNullOrEmpty(item.Imagen1))
    {
    <td style="width:20%">
    <center>
    <div style="border-style:ridge;border-width:1px;">
    <a href="@Url.Action("Details", new { id = item.ProductoId })" class="elements">
    <img src="@Url.Content(item.Imagen1)" alt="Image" style="height:200px; padding:8px" />
    </a>
    <br />
    <div>
    <h4>@Html.DisplayFor(modelItem => item.Nombre)</h4>
    <span style="font-size:11px; color:#AAA">Desde:</span>
    <br />
    <span style="color:#f8971d; font-size:17px"><strong>@Html.DisplayFor(modelItem => item.Precio)</strong></span>
    </div>
    <div style="background-color:#7271dc">
    <a href="@Url.Action("AgregarCarrito", "Carrito", new { id = item.ProductoId }, null)" style="width:30px; text-decoration:none">
    <img src="~/img/carritocomp.png" style="width:24.5px;height:23.5px; padding-right:2px"><span style="color:#ffffff"><strong>Compra rápida</strong></span>
    </a>
    </div>
    <br />
    </div>
    </center>
    </td>
    }
    itemCount++;
    if (itemCount == 4)
    {
    <tr></tr>
    itemCount = 0;
    }

    }

    </table>
    </div>
    </div>

2 respuestas 2

1

Amigo no se si es lo que buscas pero para alinear los elementos centrados Una de las opciones es usar la propiedad de CSS display:flex y con ella las propiedades align-items: center y justify-content: center; que centran cualquier elemento que este dentro del contenedor (todos los hijos).

Ejemplo

  .cajas{
      width: calc(33% - 40px);
      margin: 20px;
      height: auto;
      background: rgb(222, 222, 222);
      box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
      float: left;
  }
   .con-cajas{
   display: flex;
   align-items: center;
   justify-content: center;
 }
<div class="con-cajas">
<div class="cajas">
    <div class="">
      imagen
    </div>
    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation </p>
  </div>
  <div class="cajas">
    <div class="">
      imagen
    </div>
    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</h2>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="cajas">
    <div class="">
      imagen
    </div>
    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamsed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
  </div>
  </div>

0

Agrega un height al contenedor:

<div style="border-style:ridge;border-width:1px; height: 100px;">

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.