Wie die Höhe des Titels gleich css

Question

Meine Anwendung ein Produkt Fliesen halten hat, die die Produkttitel, Produktbild, Produktpreis, Sonderangebote usw. ...,

Aber ich steckte in einem Punkt hat immer wenn der Titel des Produkts groß ist, dann sind meine Fliesen verzerrt, ich muss eine gleiche Höhe beibehalten.

Ich habe ein paar CSS-Fixes ausprobiert, funktioniert aber nicht richtig. Wie weise ich habe Preis, spezielle Angebote auch, müssen gleiche Höhen beibehalten, wenn einer der Text erhöht wird.

Erwartung: Wenn einer der Produkttitel, Produktangebote etc .., Text größer ist, dann sollte meine Benutzeroberfläche nicht verzerrt werden.

Dies ist, was ich versucht:

.section, 
 
#tiles { 
 
    clear: both; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    zoom: 1; 
 
} 
 
.tileContainer { 
 
    width: 76.5%; 
 
    display: block; 
 
    float: left; 
 
} 
 
.tileWrapper { 
 
    display: inline-block; 
 
} 
 
.tileColumn { 
 
    float: left; 
 
    margin: 0; 
 
    width: 239.7px; 
 
} 
 
.tileProduct { 
 
    margin: 0 auto; 
 
    padding: 15px 15px 20px 20px; 
 
    cursor: pointer; 
 
    position: relative; 
 
} 
 
.spOff { 
 
    margin-bottom: 15px; 
 
    max-height: 80px; 
 
} 
 
.spOff p { 
 
    display: inline; 
 
    position: relative; 
 
    top: -3px; 
 
    padding-left: 7px; 
 
} 
 
.tileImgContainer { 
 
    width: 160px; 
 
    height: 220px; 
 
    margin: 0 auto; 
 
    white-space: nowrap; 
 
    text-align: center; 
 
} 
 
h6 { 
 
    max-height: 75px; 
 
    color: #000; 
 
} 
 
img { 
 
    max-height: 220px; 
 
    max-width: 160px; 
 
}

<div class="section"> 
 
    <div class="tileContainer"> 
 
     <div id="tiles"> 
 
     <div class="tileWrapper"> 
 
      <div class="tileColumn"> 
 
       <div class="tileProduct"> 
 
        <div class="spOff"> 
 
        <p>$1000 Off</p> 
 
        </div> 
 
        <div class="tileImg"> 
 
        <div class="tileImgContainer"> 
 
         <img src="http://i00.i.aliimg.com/wsphoto/v0/2039068830_1/All-32-teams-black-white-orange-font-b-custom-b-font-made-men-American-football-customized.jpg_220x220.jpg" /> 
 
        </div> 
 
        </div> 
 
        <h6>Loreum Ispum</h6> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="tileWrapper"> 
 
      <div class="tileColumn"> 
 
       <div class="tileProduct"> 
 
        <div class="spOff"> 
 
        <p>$1000 Off</p> 
 
        </div> 
 
        <div class="tileImg"> 
 
        <div class="tileImgContainer"> 
 
         <img src="http://i00.i.aliimg.com/wsphoto/v0/2039068830_1/All-32-teams-black-white-orange-font-b-custom-b-font-made-men-American-football-customized.jpg_220x220.jpg" /> 
 
        </div> 
 
        </div> 
 
        <h6>Loreum Ispum Loreum Ispum Loreum Ispum Loreum Ispum Loreum Ispum Loreum Ispum Loreum Ispum Loreum Ispum</h6> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="tileWrapper"> 
 
      <div class="tileColumn"> 
 
       <div class="tileProduct"> 
 
        <div class="spOff"> 
 
        <p>$1000 Off</p> 
 
        </div> 
 
        <div class="tileImg"> 
 
        <div class="tileImgContainer"> 
 
         <img src="http://i00.i.aliimg.com/wsphoto/v0/2039068830_1/All-32-teams-black-white-orange-font-b-custom-b-font-made-men-American-football-customized.jpg_220x220.jpg" /> 
 
        </div> 
 
        </div> 
 
        <h6>Loreum Ispum</h6> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="tileWrapper"> 
 
      <div class="tileColumn"> 
 
       <div class="tileProduct"> 
 
        <div class="spOff"> 
 
        <p>$1000 Off</p> 
 
        </div> 
 
        <div class="tileImg"> 
 
        <div class="tileImgContainer"> 
 
         <img src="http://i00.i.aliimg.com/wsphoto/v0/2039068830_1/All-32-teams-black-white-orange-font-b-custom-b-font-made-men-American-football-customized.jpg_220x220.jpg" /> 
 
        </div> 
 
        </div> 
 
        <h6>Loreum Ispum Loreum Ispum Loreum Ispum Loreum Ispum</h6> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="tileWrapper"> 
 
      <div class="tileColumn"> 
 
       <div class="tileProduct"> 
 
        <div class="spOff"> 
 
        <p>$1000 Off</p> 
 
        </div> 
 
        <div class="tileImg"> 
 
        <div class="tileImgContainer"> 
 
         <img src="http://i00.i.aliimg.com/wsphoto/v0/2039068830_1/All-32-teams-black-white-orange-font-b-custom-b-font-made-men-American-football-customized.jpg_220x220.jpg" /> 
 
        </div> 
 
        </div> 
 
        <h6>Loreum Ispum Loreum Ispum Loreum Ispum Loreum Ispum</h6> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="tileWrapper"> 
 
      <div class="tileColumn"> 
 
       <div class="tileProduct"> 
 
        <div class="spOff"> 
 
        <p>$1000 Off</p> 
 
        </div> 
 
        <div class="tileImg"> 
 
        <div class="tileImgContainer"> 
 
         <img src="http://i00.i.aliimg.com/wsphoto/v0/2039068830_1/All-32-teams-black-white-orange-font-b-custom-b-font-made-men-American-football-customized.jpg_220x220.jpg" /> 
 
        </div> 
 
        </div> 
 
        <h6>Loreum Ispum Loreum Ispum Loreum Ispum</h6> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

Haben Sie einfach die Wrapper auf die Top-Modell der Box ausrichten möchten ...?

.tileWrapper { 
    display: inline-block; 
    vertical-align:top; 
} 

https://jsfiddle.net/axfocg61/

---

Wenn das ist es nicht, bitte genauer sein. Ein Bild, das zeigt, wie es aussehen soll, könnte helfen.

Beachten Sie, dass meine vorgeschlagene Lösung die Ausrichtung nur korrigiert - wenn Sie tatsächlich Elemente mit gleicher Höhe benötigen (zB weil auf jeder Kachel ein Hintergrund oder Rahmen angewendet werden soll), dann sollten Sie in flexbox schauen.

Answer 2

.tileWrapper { 
    display: block; 
} 

.tileWrapper:nth-child(5n+1) { 
    clear: both; 
} 

Answer 3

Blindschuss.

Für gleiche Höhen versuchen Sie height und overflow-y: hidden zu .tileProduct.