Question

我的应用程序有产品图块，产品名称，产品图片，产品价格，特价等...

但我坚持一点，每当产品的标题很大，那么我的瓷砖就会扭曲，我需要保持相同的高度。

我尝试了几个css修复但是没有正常工作。同样明智的我有价格，特别优惠，如果其中一个文字增加，需要保持相同的高度。

期望：如果任何产品标题，产品提供等等，文本更大，那么我的UI不应该被扭曲。

这就是我的尝试：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您是否只想将包装器对齐到行框的顶部......？

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

https://jsfiddle.net/axfocg61/

如果不是这样，请更具体。显示它看起来像什么的图像可能会有所帮助。

请注意，我提出的解决方案仅修复了对齐 - 如果您确实需要具有相同高度的元素（因为背景或边框应该应用于每个图块），那么您应该查看flexbox。

Answer 2

.tileWrapper {
    display: block;
}

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

如何保持标题的高度css

2 个答案: