Border wird nicht auf das gesamte div angewendet?

Question

Ich versuche, ein div (Trending-Panel) zu erstellen, das nur 30% der gesamten Seite ist, in diesem div enthält 10 generierte Divs (Trending-Div). Die mehreren generierten divs enthalten ein Bild, einen Text ($ title) und die Anzahl der Ansichten, die dieser Artikel hat ($ Counter). Aus irgendeinem seltsamen Grund, wenn ich einen Rahmen an das gesamte Trending-Panel anwende, wird der Rahmen nicht auf das letzte Bild und den letzten Text angewendet. Auch wenn das letzte Bild und Text ausgedruckt, der Trending-Panel zählt es aus irgendeinem Grunde nicht und druckt nur die Grenze in Richtung der ersten 9. Hier ist mein Code:

HTML-Code:

<div class="trending-panel"> 
       <?php 
        $resultSet = $db->query("SELECT * FROM Articles ORDER BY Counter DESC, dateStamp DESC LIMIT 10"); 

        if ($resultSet->num_rows != 0) 
        { 
         while ($rows = $resultSet->fetch_assoc()) 
         { 
          $image = $rows["image"]; 
          $title = $rows["title"]; 
          $link = $rows["link"]; 
          $count = $rows["Counter"]; 

          echo "<div class='trending-div'><img src='{$image}'/><p>{$title}</p><p id='count'>{$count}</p></div>"; 
         } 
        } 
       ?> 
      </div> <!--End of trending panel div--> 

CSS:

.trending-panel{ 
width: 30%; 
border: 1px solid lightgray; 
} 

.trending-div{ 
    position: relative; 
    clear: both; 
    border: 1px solid lightgray; 
} 

.trending-div img{ 
    width: 45%; 
    height: 120px; 
    float: left; 
} 

.trending-panel p{ 
    width: 54%; 
    float: right; 
    font-family: "Oswald"; 
    font-size: 16px; 
    color: black; 
} 

#count{ 
    position: absolute; 
    bottom: 0px; 
    right: 0px; 
    font-family: "Oswald"; 
    font-size: 14px; 
    color: black; 
} 

generiert HTML:

<div class="trending-panel"> 
        <div class='trending-div'><img src='/media/thumbnails/bus-falls-in-alligator-pond.jpg'/><p>School Bus Falls Into Alligator Pond</p><p id='count'>202254</p></div><div class='trending-div'><img src='/media/thumbnails/foods-that-can-kill-you.jpg'/><p>Top Ten Foods That Can Kill You</p><p id='count'>150136</p></div><div class='trending-div'><img src='/media/thumbnails/most-shocking-facts-about-disney.jpg'/><p>The Top Ten Most Shocking Facts About Disney</p><p id='count'>102508</p></div><div class='trending-div'><img src='/media/thumbnails/extremely-weird-religions.jpg'/><p>10 Extremely Weird Religions</p><p id='count'>98069</p></div><div class='trending-div'><img src='/media/entertainment/trump.jpg'/><p>This Is What Would Happen If You Stopped Sleeping</p><p id='count'>45646</p></div><div class='trending-div'><img src='/media/thumbnails/signs-you-grew-up-in-the-90s.jpg'/><p>10 Signs You Grew Up In The 90s</p><p id='count'>26183</p></div><div class='trending-div'><img src='/media/thumbnails/no-spin-earth.jpg'/><p>This Is What Would Happen If The Earth Stopped Spinning</p><p id='count'>7144</p></div><div class='trending-div'><img src='/media/thumbnails/bubble-gum-under-shoe.jpg'/><p>10 Unwritten Rules Everyone Should Follow</p><p id='count'>3593</p></div>    </div> <!--End of trending panel div--> 

Answer 1

Es könnte sein, weil Sie im, Für das Alter-Tag gibt es keine Anführungszeichen um den Attributwert src. Fügen Sie auch ein näher für das Bild ändern:

echo "<div class='trending-div'><img src=$image><p>$title</p><p id='count'><$count</p></div>"; 

zu:

echo "<div class='trending-div'><img src='{$image}'/><p>{$title}</p><p id='count'>{$count}</p></div>";       

die Sie interessieren, haben Sie eine ‚<‘ vor $ count, die nicht gültig ist, wenn Sie wollen < verwenden oder> dann müssen Sie Escape-Codes verwenden, da diese den Anfang und das Ende von Tags markieren.