divのCSSスタイリング

Question

データベースから自動生成されたdivに問題があります。私のデータベースに保存されているニュースを表示しようとしています。行ごとに2つのニュースと異なる高さ内容に応じてしかし、今私は、同じ垂直列に2つのニュースを持つ大きな白いスペースを持っています。これをどのように解決すればいいですか？ここで

は私の問題を示した画像は、次のとおりです。ここで

は、それぞれの新しいのための私のhtmlコードです：

<?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>'; 
     } 
    ?> 

そして、ここでは、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

あなたの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; 
}