Css 图像从盒子里掉出来

你好，我是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>

克莱丁

---

提前谢谢

元素的对齐有点混乱

要尽量减少这种情况，请使用：

img { // for the image not the div..
 max-width: 100px;
}

您可以根据此处提供的宽度更改

100px

。这样，图像的宽度将减小，以适合该位置

代码中的错误：

问题在于元素的高度。您创建的列表也有自己的边距和填充。这导致图像移动到盒子外面

解决方案：

由于这个原因，我将

高度

应用于

内容

，并获得了框内的图像。因为现在div有了更多的高度来覆盖里面的图像。但是

ul

仍然有自己的边距和填充。彻底解决这个问题。使用

ul {
 margin: 0;
 padding: 0;
}

这是一把小提琴，看一看

---

为

内容指定
高度
：

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

定义
内容的
高度和
宽度

将
h2
放入
#navbanner
div
向左浮动
#导航横幅
请参见此jsbin：

（注意：我将图像更改为google徽标，以便您可以实际查看示例中的图像。此外，我还为div添加了背景，以便您可以看到它们的位置。）
您可以提供HTML吗？请为方框尝试“float:left”，或在两者上尝试“display:block”。显示HTML总是一个好主意，最好是JSFIDLE；图像移离或移到我的浏览器屏幕的边框。等等，我已经创建了一个提琴。现在看一看。。我已经解释了这个问题，还加了一句话：）改变高度似乎是可行的。只有一个高度：auto由于某些原因不起作用。它起作用。如果不起作用，则在内容上添加
overflow:hidden
。如果答案解决了您的问题，您可以接受答案：）