使用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