Question

我正在尝试设置通知消息的样式。这是带有消息的警报图像，如this。我希望它只有少量的html，所以目前通知的html只是

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

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

日Thnx

Answer 1

对于之前的解决方案感到抱歉，只是编辑了我的回答

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

Demo

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

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

2 个答案: