css - 图像从盒子里掉出来

Question

您好，我是 html 和 css 的新手。我开始制作一个盒子，我想在盒子的右侧显示一个图像。但出于某种原因，我的图像最终出现在框下。请帮忙。box name = content 我用 css 做的是这样的:

#content{
 margin: 30px 0;
 background: white;
 padding: 20px;
 clear: both;
 box-shadow: 0px 1px 1px #999;
}

图片的CSS:

#img{
 float:right;
 padding: 20px;
 overflow:hidden;
}

这是html代码:

<div id="content">
    <h2>Kleding</h2>
    <div id="navbanner">
    <div id="nav2">
        <ul>
            <li><a href="../html/kleding.html"id="Babynav">Baby</a></li>
            <li><a href="../html/kleding.html"id="Peuternav">Peuter</a></li>
            <li><a href="../html/kleding.html"id="Kleuternav">Kleuter</a></li>
        </ul>
    </div>
    </div>
    <div id="img">
      <img src="../images/winkelwagen.jpg">
    </div>
</div>

提前致谢。

Answer 1

为内容指定高度:

#content{
margin: 30px 0;
background: white;
padding: 20px;
clear: both;
box-shadow: 0px 1px 1px #999;
height:100px;
}