Was ist der beste Weg, um das zu beheben?/DESIGN/

Question

Manchmal stoßen wir auf diese Art von Problem, wenn der Inhalt dynamisch ist und immer vorhersagt, in diesem Fall werden die Größen sehr variabel, mit der Schaltfläche unten und bis das Layout bricht.

also Ihrer Meinung nach, was ist der beste Weg aus?

Enter in my site here

Answer 1

Da alles außer der Produktbeschreibung ist eine Standardhöhe:

Verwenden Sie verschachtelte Flexboxen.

Die äußere Flexbox ordnet die verschiedenen Produkte in einer Reihe an und streckt sie auf die gleiche Höhe.

Die inneren Elemente erlauben dann die Beschreibung, und nur die Beschreibung, flex-grow (so dass die Höhe gefüllt ist).

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

Wenn Sie mit js oder jquery vermeiden wollen, möchte ich hinzufügen:

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

Damit Sie sicherstellen, dass alles von der gleichen Höhe ist und Sie nicht es auf den Inhalt Höhe verlassen

Answer 3

Wenn Sie den Text in einer Zeile möchten Sie die folgende versuchen können, die den Artikelnamen machen erscheinen als Casinha De Cachorro Decora ...

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