これを修正する最善の方法は何ですか？/DESIGN/

Question

コンテンツが動的敵である場合、このタイプの問題に遭遇することがあります。この場合、サイズは非常に変動します。

だから、あなたのビューで、うち最良の方法は何ですか？

Enter in my site here

Answer 1

は、標準の高さ：

ネストされたフレックスボックスを使用します。

外側フレックスボックスは、異なる製品を並んで配置し、同じ高さに伸ばします。

内側の要素によって、説明だけが記述され、flex-grow（高さが埋められるように）することができます。

ul, 
 
li { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 

 
ul { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    align-items: stretch; 
 
} 
 

 
li { 
 
    flex: 0 0 250px; 
 
    margin: 0 10px; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
li>* { 
 
    flex: 0 0 auto; 
 
} 
 

 
.promo { 
 
    background: green; 
 
    color: white; 
 
    padding: 5px; 
 
    margin-left: 40%; 
 
} 
 

 
.image { 
 
    height: 80px; 
 
    background: grey; 
 
} 
 

 
li>.description { 
 
    font-size: 180%; 
 
    flex: 1 1 auto; 
 
} 
 

 
.details { 
 
    background: green; 
 
    margin: 0 20%; 
 
}

<ul class="products"> 
 
    <li> 
 
    <div class="promo">Promotion</div> 
 
    <div class="image"></div> 
 
    <div class="description">Short!</div> 
 
    <div class="stars">*****</div> 
 
    <div class="price">€33.33</div> 
 
    <div class="details">details</div> 
 
    </li> 
 
    <li> 
 
    <div class="promo">Promotion</div> 
 
    <div class="image"></div> 
 
    <div class="description">This is a long description!</div> 
 
    <div class="stars">*****</div> 
 
    <div class="price">€33.33</div> 
 
    <div class="details">details</div> 
 
    </li> 
 
</ul>

Answer 2

あなたはJSやjqueryのを使用しないようにしたい場合は、私が追加します。これにより

.produtos_loop_geral h2{ 
    max-height: 30px; 
    min-height: 30px; 
} 

を使用すると、すべてが同じ高さであることを確認し、あなたがコンテンツの高さにそれを残してはいけません製品の説明以外のすべてを考えると

Answer 3

あなたは1行のテキストをご希望の場合は、アイテム名を行います以下のことを試すことができますCasinhaデCachorroデコラとして表示されます...

.produtos_loop_geral h2 { 
font-size: 1.3em; 
text-align: center; 
color: #636363; 
max-height: 30px; 
min-height: 30px; 
white-space: nowrap; 
text-overflow: ellipsis; 
overflow: hidden; 
}