图像开箱即用
图像开箱即用
提问于 2013-10-18 01:46:52
你好，我是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>提前谢谢。
回答 3
Stack Overflow用户
发布于 2013-10-18 01:54:35
元素的对齐有一些问题。
要最大限度地减少这种情况，请使用：
img { // for the image not the div..
max-width: 100px;
}您可以根据此处提供的宽度更改100px。这样，图像的宽度就会变小，以适合该位置。
你的代码中的错误：
问题出在元素的高度上。您创建的列表也有自己的页边距和填充。这导致图像移动到盒子之外。
解决方案：
由于这个原因，我对content应用了height，并获得了盒子内的图像。因为现在div有了更多的高度来覆盖其中的图像。但ul仍然有自己的边距和填充。来彻底解决这个问题。使用
ul {
margin: 0;
padding: 0;
}这是一把小提琴，看看吧！
http://jsfiddle.net/afzaal_ahmad_zeeshan/AjvuE/
Stack Overflow用户
发布于 2013-10-18 01:57:22
为content指定height
#content{
margin: 30px 0;
background: white;
padding: 20px;
clear: both;
box-shadow: 0px 1px 1px #999;
height:100px;
}Stack Overflow用户
发布于 2013-10-18 02:03:14
为#content
- put
h2定义height和width#navbanner
- float
#navbannerto left
查看jsbin：http://jsbin.com/udOcab/1/
(注意:我将图像更改为google徽标，以便您可以实际查看示例的图像。此外，我还为div添加了背景，以便您可以看到它们的位置。)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19433674
复制相关文章
相似问题
腾讯云开发者
