1

通知メッセージのスタイルを設定しようとしています。それは、このようなメッセージ付きの警告画像です。最低限のhtmlでお願いしたいので、現状告知用のhtmlは

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

jsfiddle は、親が任意のサイズであることを除いて、私が望むことを行います。つまり、上記の html はレスポンシブでなければなりません。どのような状況でもメッセージの直前になるようにアイコンを配置することは可能ですか? これが不可能な場合は、もちろん他のきちんとしたソリューションも大歓迎です!

thnx

4

2 に答える 2

4

以前の解決策で申し訳ありませんが、私の回答を編集しました

疑似を使用する: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;
}
于 2013-09-23T07:59:47.927 に答える
1

imgHTMLに追加:

<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

于 2013-09-23T07:53:52.647 に答える