html - 如何让 div 环绕图像？

Question

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

这应该很容易，但我在互联网上找到的任何东西都没有帮助。目前我的形象是这样的:

但白框(一个带有白色背景的 <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;
}

我需要做什么？

Answer 1

它不是真正的 div，它是一个 span。将标签更改为:

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

}