你怎么得到一个div来包裹图像？

Question

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

这应该很简单，但我在互联网上找到的任何内容都没有帮助。目前我的图片看起来像这样：

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

这是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，它是一个跨度。将标记更改为：

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

}

Answer 2

您需要设置div维度并为图片提供max-width以获得可扩展性。同时将其设为block而不是inline。

CSS：

.screenshot {
    max-width: 100%;
    border: solid black 1px;
}
.image-div {
    background-color: white;
    padding: 10px;
    width:20%;
    height: 20%;
}

Teach you how to Douglas.

Answer 3

just add one more attribute float:left, with some width (if you want)
or
if { display:inline } no need then remove it from here, I've update your updated code below:

现在复制粘贴到css：

下面

.screenshot {

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

.image-div
{
background-color: white;
padding: 10px;
display: inline; /* if no need then remove it */
overflow: hidden;
float: left; /* please add */
width: 88px; /* if you want to add some width */
}