我不明白为什么用这段代码不显示图像:
HTML:
<aside>
<img />
<h3>Feature headline</h3>
</aside>
CSS:
aside {
width: 286px;
height: 200px;
float: left;
text-align: center;
margin-left: 20px;
background: rgb(225,225,225);
}
aside img {
width: 100%;
height: 150px;
background: rgb(200,200,200);
}
JSFIDDLDE
当它与另一个一起显示时:
HTML:
<div class="sharecontent">
<h2>Organize headline</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<img>
CSS:
img {
width: 440px;
height: 225px;
float: left;
margin-left: 20px;
margin-top: 20px;
background: rgb(200,200,200);
}
.sharecontent {
float:left;
margin-left: 20px;
width: 440px;
}
JSFIDDLE
知道为什么第一个选项中没有显示图像吗?
最佳答案
这显然是 Firefox 的问题。适用于除 Firefox 之外的所有浏览器。设置 <img>
至 display: block
按照 Will 的建议解决了问题:
编辑:看起来是缺少的 src
img
中的属性.虽然将元素设置为 display: block
有效,这可能不是正确的解决方案。那为什么要用 <img>
-标签。
关于css - 图像未显示在 HTML5 线框中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21577234/