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

Question

我正在尝试设置通知消息的样式。 这是一个警告图像与信息，像这样 。 我希望它使用的HTML数量最少，所以目前用于通知的HTML仅

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

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

n

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