html - 使用 CSS 设置响应式通知消息的样式

Question

我正在尝试设置通知消息的样式。那是带有消息的警报图像，如下所示。我希望它包含最少的 html，所以目前通知的 html 只是

<p class="notice error">This is a message</p>

jsfiddle 做我想要的，除了父级可以是任何大小，这意味着上面的 html 应该是响应式的。是否可以定位图标，以便在任何情况下它都位于消息之前？如果这是不可能的，当然也欢迎其他简洁的解决方案！

谢谢

Answer 1

抱歉之前的解决方案，刚刚编辑了我的答案

使用:before伪，它会完成这项工作，这样您就不必在 HTML 中添加额外的元素。

演示

p.notice:before {
    content: "";
    height: 20px;
    width: 20px;
    display: inline-block;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/a/ac/Approve_icon.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    vertical-align: middle;
}

Answer 2

添加img到 HTML：

<div id="parent">
    <p class="notice error"><img src="http://www.foghornnews.com/wp-content/uploads/2013/02/Alert-Icon-.png" alt="warning" />This is a message</p>
</div>

和 CSS：

html,body,#parent{
    width:100%;
}

p img{
    height:20px; /* some height */
}

JSFiddle