CSS-Styling von divs

Question

Ich habe ein Problem mit automatisch generierten divs aus einer Datenbank, ich versuche Nachrichten zu zeigen, die in meiner Datenbank gespeichert sind, ich setze die Breite, um 2 Nachrichten pro Zeile und unterschiedliche Höhen zu haben nach Inhalt. Aber jetzt habe ich eine große weiße Fläche mit zwei Nachrichten in derselben vertikalen Reihe. Wie löse ich das? Hier

ist das Bild, das mein Problem zeigt:

Hier ist mein HTML-Code für jeden neu:

<?php 

     while($row = mysqli_fetch_array($resultNoticias)){ 
     echo '<div class="noticia">';  
     echo '<h4>Noticias/' . $row["Fecha"] . '</h4>'; 
     echo '<a href="new.php?id='.$row["idNoticias"] . '"><h3>' . utf8_encode($row["Titulo"]) . '</h3></a>'; 
     echo '<p>'. utf8_encode($row["Descripcion"]) . '</p>'; 
     echo '<a href="new.php?id='.$row["idNoticias"]. '"> <img style="height:100%;width:100%;" src=images/' . $row["Imagen1"] . '></a><br>'; 
     echo '<br><br>'; 
     echo '</div>'; 
     } 
    ?> 

Und hier ist die CSS:

.noticia{ 
    width: 48%; 
    position: relative; 
    float: left; 
    display: inline-block; 
    padding-left: 2%; 
    padding-right: 2%; 
    text-align: left; 
    padding-top: 10px; 
    word-wrap: break-word; 
    font-size: 1.5em; 
    background-color:white; 
    border:2px solid black; 
    margin-left:1%; 
    background-color: #DADADA; 
} 

Answer 1

Bitte addieren Sie minimale Höhe in Ihrem css.

.noticia{ 
    width: 48%; 
    min-height:300px; 
    position: relative; 
    float: left; 
    display: inline-block; 
    padding-left: 2%; 
    padding-right: 2%; 
    text-align: left; 
    padding-top: 10px; 
    word-wrap: break-word; 
    font-size: 1.5em; 
    background-color:white; 
    border:2px solid black; 
    margin-left:1%; 
    background-color: #DADADA; 
}