0

http://jsfiddle.net/adamadam123/qv2yR/

上記は私が現在取り組んでいるコードです。以下は、私が達成しようとしているもののイメージです。

ここに画像の説明を入力

基本的にチャットボックス「IM」で、青とピンクの画像があり、画像内にさまざまな量のテキストを配置できるようにする必要があります。

また、画像を CSS の背景として使用しようとしましたが、テキストに合わせて拡大されないことがわかりました。フローティングと絶対配置も試しました。

どんな助けでも大歓迎です。

どうも

    <div class="chatMessengerBody">

        <div class="chatMessengerChatBubble chatMessengerChatBubbleBlueWrapper">
            <img src="images/chat-messenger-chat-bubble-blue.png" class="chatMessengerChatBubble chatMessengerChatBubbleBlue"/>
            <p class="chatMessengerChatBubbleContent">Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?
            Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?
            Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?
            </p>
        </div>

        <div class="chatMessengerChatBubble chatMessengerChatBubblePinkWrapper">
            <img src="images/chat-messenger-chat-bubble-pink.png" class="chatMessengerChatBubble chatMessengerChatBubblePink"/>
            <p class="chatMessengerChatBubbleContent">Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?</p>
        </div>

    </div>
4

2 に答える 2

1

画像の代わりに、CSS と CSS3 の角を丸くしてみませんか。

.chatMessengerChatBubblePinkWrapper {
    background:#fff8f2;
    border:1px solid #ffeadb;
    -webkit-border-radius: 5px;
    border-radius:5px;
}
于 2012-11-12T21:35:27.947 に答える
1

http://jsfiddle.net/qv2yR/10/

CSS

.blue {
    background: #EBF7FF;
    border: 1px solid #D4F1FD;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color :#6B95B0;
    margin-bottom: 5px;
    padding: 5px;    
    width: 200px;
}

.pink {
    background: #FFF8F2;
    border: 1px solid #FFEEE4;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color :#D386A8;
    margin-bottom: 5px;
    padding: 5px;    
    width: 200px;
}

HTML

<div class="blue">
 this is the blue one
</div>

<div class="pink">
    this is the pink one.
</div>
于 2012-11-12T21:35:41.720 に答える