Falsche Div Blöcke Layout auf einer Seite

Question

Ich mache eine sehr einfache Seite mit einer Liste von Informationsblöcken, die Foto und Beschreibung enthalten. Wenn die Länge der Beschreibung zunimmt, steigt auch die Höhe der div und jede nächste Zeile von item-block fließt direkt neben der höchsten div.

Gibt es eine Möglichkeit, die folgenden Blockreihen ohne Unterbrechung ausgegeben? Entweder unter den vorherigen oder knapp unter dem höchsten Div in einer vorherigen Zeile.

Hier ist mein HTML und CSS-Code:

.item-container { 
 
    max-width: 90%; 
 
    display: table; 
 
    border: 4px double #d9d9d9; 
 
    border-radius: 5px; 
 
    margin: auto; 
 
} 
 
.item-block { 
 
    border: solid lightgray 1px; 
 
    border-radius: 10px; 
 
    width: 230px; 
 
    float: left; 
 
    padding: 5px; 
 
    margin: 3px; 
 
} 
 
.item-image { 
 
    padding-top: 2px; 
 
    width: 220px; 
 
    height: 220px; 
 
} 
 
.item-text { 
 
    font-size: 14px; 
 
    color: #666666; 
 
    text-align: justify; 
 
}

<div class="item-container"> 
 

 
    <div class="item-block"> 
 
    <div> 
 
     <img src="https://placeimg.com/400/400/tech" alt="Test Image" class="item-image"> 
 
    </div> 
 
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis. Lorem ipsum dolor.</div> 
 
    </div> 
 

 
    <div class="item-block"> 
 
    <div> 
 
     <img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image"> 
 
    </div> 
 
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda cumque dolorem eos illo itaque maiores optio quisquam. Autem excepturi, harum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div> 
 
    </div> 
 

 
    <div class="item-block"> 
 
    <div> 
 
     <img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image"> 
 
    </div> 
 
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div> 
 
    </div> 
 

 
    <div class="item-block"> 
 
    <div> 
 
     <img src="https://placeimg.com/400/400/tech" alt="Test Image" class="item-image"> 
 
    </div> 
 
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis. Lorem ipsum dolor.</div> 
 
    </div> 
 

 
    <div class="item-block"> 
 
    <div> 
 
     <img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image"> 
 
    </div> 
 
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda cumque dolorem eos illo itaque maiores optio quisquam. Autem excepturi, harum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div> 
 
    </div> 
 

 
    <div class="item-block"> 
 
    <div> 
 
     <img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image"> 
 
    </div> 
 
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div> 
 
    </div> 
 

 
    <div class="item-block"> 
 
    <div> 
 
     <img src="https://placeimg.com/400/400/tech" alt="Test Image" class="item-image"> 
 
    </div> 
 
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis. Lorem ipsum dolor.</div> 
 
    </div> 
 

 
    <div class="item-block"> 
 
    <div> 
 
     <img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image"> 
 
    </div> 
 
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda cumque dolorem eos illo itaque maiores optio quisquam. Autem excepturi, harum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div> 
 
    </div> 
 

 
    <div class="item-block"> 
 
    <div> 
 
     <img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image"> 
 
    </div> 
 
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div> 
 
    </div> 
 

 
    <div class="item-block"> 
 
    <div> 
 
     <img src="https://placeimg.com/400/400/tech" alt="Test Image" class="item-image"> 
 
    </div> 
 
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis. Lorem ipsum dolor.</div> 
 
    </div> 
 

 
    <div class="item-block"> 
 
    <div> 
 
     <img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image"> 
 
    </div> 
 
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda cumque dolorem eos illo itaque maiores optio quisquam. Autem excepturi, harum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div> 
 
    </div> 
 

 
    <div class="item-block"> 
 
    <div> 
 
     <img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image"> 
 
    </div> 
 
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div> 
 
    </div> 
 

 
</div>

Answer 1

ein Weg, dies ein Skript genau zu tun ist, verwenden, die den höchsten Block findet und gibt dann seine height auf alle Blöcke

Kontrolle dieses jsfiddle

der Code hinzugefügt:

$(document).ready(function(){ 

var highest = 0; 
    $('.item-block').each(function(){ 
      if($(this).height() > highest){ 
      highest = $(this).height(); 
    } 
});  
$('.item-block').height(highest); 

}); 

oder wenn Sie CSS hinzufügen display:inline-block statt float:left verwenden möchten, und fügen Sie auch vertical-align:top zu .item-block sehen hier jsfiddle

aber diese Lösung wird das machen Blöcke sehen irgendwie unordentlich aus, weil sie nicht gleiche Höhen haben ... deshalb ist die erste Lösung mit jq

Answer 2

Für diejenigen, die über diese Frage in der Forschung gekommen sind, ihre eigenen Probleme zu lösen, ist dies eine codepen demonstriert die Lösung vorgeschlagen:

http://codepen.io/anon/pen/gMgLpp

.item-block { 
    border: solid lightgray 1px; 
    border-radius: 10px; 
    width: 230px; 
    vertical-align:top; /* Added */ 
    padding: 5px; 
    margin: 3px; 
    display:inline-block; /* Added */ 
}