图像开箱即用答案

【问题标题】：Image falls out of box图像开箱即用
【发布时间】：2013-10-26 08:29:05
【问题描述】：

您好，我是 html 和 css 的新手。我开始制作一个盒子，我想在盒子的右侧显示一个图像。但由于某种原因，我的图像最终出现在盒子下面。请帮忙。框名 = 内容，我在 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>

提前致谢。

【问题讨论】：

你能提供你的 HTML 吗？
为你的盒子尝试'float:left'，或者在两者上都尝试'display:block'。显示您的 HTML 总是一个好主意，最好是 jsfiddle。

标签： css image css-float

【解决方案1】：

元素的对齐有点混乱。

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

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

您可以根据此处提供的宽度更改100px。这样，图像的宽度将减小以适合该位置。

代码中的错误：

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

解决方案：

由于这个原因，我将height 应用到content 并获得了框内的图像。因为现在 div 有更多的高度来覆盖其中的图像。但是ul 仍然有自己的边距和填充。彻底消除问题。使用

ul {
 margin: 0;
 padding: 0;
}

这是一个小提琴，看看！

http://jsfiddle.net/afzaal_ahmad_zeeshan/AjvuE/

【讨论】：

如果我使用最大宽度：500px；图像从浏览器屏幕的边框移开或移到边框。
等等，我已经创建了一个小提琴
现在看看..我已经解释了这个问题并添加了一个小提琴:)

【解决方案2】：

为content 指定height：

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

【讨论】：

更改高度似乎有效。只有一个高度：由于某种原因，自动不会。
它有效..如果它没有然后在内容上添加overflow:hidden。如果它解决了您的问题，您可以接受答案..:)

【解决方案3】：

为#content 定义height 和width
将h2 放入#navbanner div
将#navbanner 向左浮动

看到这个jsbin：http://jsbin.com/udOcab/1/

（注意：我将图像更改为 google 徽标，以便您可以实际查看示例的图像。此外，我为 div 添加了背景，以便您可以看到它们的位置。）

【讨论】：