图像未显示在HTML5线框中

Question

我不明白为什么用这段代码不显示图像：

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

知道为什么图像没有显示在第一个选项中吗？

Answer 1

这显然是Firefox问题。适用于除Firefox之外的所有浏览器。按照Will的建议将<img>设置为display: block可以解决问题：

编辑：看起来它是src中缺少的img属性。虽然将元素设置为display: block有效，但这可能不是正确的解决方案。那么为什么要使用<img> - 标记。

Answer 2

在第二个示例中，添加float: left;会创建一个块。您需要将img设置为display: block;到第一个示例。

编辑：我在这两点上显然都错了，但http://jsfiddle.net/XWA45/3/有效（仅添加display: block;）和http://www.w3.org/wiki/Floats_and_clearing#Some_boring_theory表示添加浮动属性会创建一个＆＃39; CSS块＆＃39 ;.我一定错过了什么。

Answer 3

您错过了强制性 src属性，这就是为什么它在Firefox中失败（其他浏览器都没问题）

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img

  

<强> SRC

     

    

图片网址，该元素必须具有此属性。

  

您可以使用lorempixel.com测试布局

<img src="http://lorempixel.com/300/200" />

http://jsfiddle.net/GwK75/