Question

我正在尝试创建一个div（趋势面板），它只占总页面的30％，其中div包含10个生成的div（trending-div）。多个生成的div包含图像，文本（$ title）和文章具有的视图数（$ Counter）。由于某些奇怪的原因，当我将边框应用于整个趋势面板时，边框不会应用于最后一个图像和文本。即使打印出最后一张图像和文字，趋势面板也不会因为某些原因而计算它，只会将边框打印到第一张图片。这是我的代码：

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

可能是因为您的图片标记在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>";

试试这个，你有'＆lt;' $ count之前，如果你想使用＆lt;无效或者＆gt;然后你必须使用转义码，因为它们标记了标签的开头和结尾。

边框没有应用于整个div？

1 个答案: