ボーダーがdiv全体に適用されていませんか？

Question

私はそのdivに10個の生成されたdiv（trending-div）が含まれているので、全体のページのわずか30％であるdiv（トレンドパネル）を作成しようとしています。生成された複数のdivには、画像、text（$ title）、および記事に含まれるビューの数（$ Counter）が含まれます。奇妙な理由のために、トレンディングパネル全体に境界を適用すると、境界線が最後のイメージとテキストに適用されません。最後の画像とテキストがプリントアウトされているにもかかわらず、トレンドパネルは、いくつかの理由のためにそれをカウントし、最初の9の方に境界線を印刷していません。ここに私のコードです：

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

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

それが原因であなたのイムかもしれませんageタグにはsrc属性値の前後に引用符はありません。また、画像変化のためのより近くを追加します。

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

へ：

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

あなたが<を使用したい場合は、有効ではありません$回数、前に「<」を持って、これを試してみてくださいまたは>これらはタグの開始と終了を示すため、エスケープコードを使用する必要があります。