html - 如何获得div环绕图像？

编辑：我复制了错误的代码版本。

这应该确实很容易，但是我在互联网上找不到任何帮助。目前，我的图片如下所示：



但是白色框（带有白色背景的<div>元素）并没有环绕图片，它只是停留在底部，尽管是<img>的父标签

这是html：

<div class="image-div">
    <a href="planner.html">
        <img class="screenshot" src="http://wiki.tripwireinteractive.com/images/4/47/Placeholder.png" alt="University Planner"/>
    </a>
</div>

和CSS：

.screenshot {

    width:20%;
    height: 20%;
    border: solid black 1px;
}

.image-div
{
    background-color: white;
    padding: 10px;
    display: inline;
}

我需要做什么？

最佳答案

它不是真正的div，而是跨度。将标签更改为：

<div class="image-div">
    <a href="planner.html">
        <img class="screenshot" src="http://wiki.tripwireinteractive.com/images/4/47/Placeholder.png" alt="Planner"/>
    </a>
</div>

或者，如果必须保持跨度，则向其中添加display:block;属性：

.image-div
{
    background-color: white;
    padding: 10px;
    display:block;

}