Help showing catalog products html css

Navigation
1

I have the following code in HTML where I want to show a catalog of products with 4 columns and n rows- Everything is fine and it works but when the name of the product is too long the table starts to go down and stretch and unravels the others. 

    <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>
    
asked by Juan Pablo Gomez Monsalve 19.12.2017 в 19:34
source

2 answers

1

Friend I do not know if it's what you're looking for but to align the centered elements One of the options is to use the CSS property display:flex and with it the properties align-items: center and justify-content: center; that center any element that is inside the container (all children).

Example 

  .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>
    
answered by 19.12.2017 в 19:48
0

Add a height to the container: 

<div style="border-style:ridge;border-width:1px; height: 100px;">
    
answered by 22.06.2018 в 19:43
GeneXus 15 - live editingting (DOUBT) How to use css3 variables, without problems of compatibility with Internet Explorer or other old browsers?