HTML div矢印と画像のボックス

Question

矢印の付いたコメントボックスを作成しようとしています。私はCSSを使用していますが、私は解決できない問題があります。 画像を配置すると、コメントボックスが画像を下っています。コメントボックスは画像を指しません。 イメージの左にコメントボックスを追加できません。画像を指し示すコメントボックス。

img{ 
    float:left; 
} 

（重要：：！あなたは複数持っている場合はここ

は、あなたがイメージに "フロート" スタイルを適用する必要があるコード

.left { 
    width: 920px !important; 
    padding-bottom: 40px; 
    min-height: auto !important; 
    padding-right: 0; 
    float: left; 
} 

.left > p:first-of-type { 
    background: #ffd987; 
    font-style: italic; 
    padding: 5px 10px; 
    margin-bottom: 40px; 
} 
.tip { 
    background: #fff; 
    border: 1px solid #ccc; 
    padding: 10px; 
    font-size: 1.2em; 
    position: relative; 
    width: 200px; 
} 
.tip:before { 
    position: absolute; 
    top: -14px; 
    left: 98px; 
    display: inline-block; 
    border-right: 14px solid transparent; 
    border-bottom: 14px solid #fff; 
    border-left: 14px solid transparent; 
    border-bottom-color: rgba(0, 0, 0, 0.2); 
    content: ''; 
} 
.tip:after { 
    position: absolute; 
    top: -12px; 
    left: 99px; 
    display: inline-block; 
    border-right: 12px solid transparent; 
    border-bottom: 12px solid #fff; 
    border-left: 12px solid transparent; 
    content: ''; 
} 
.tip.left:before { 
    border-top: 14px solid transparent; 
    border-right: 14px solid #fff; 
    border-bottom: 14px solid transparent; 
    border-right-color: rgba(0, 0, 0, 0.2); 
    left: -28px; 
    top: 20px; 
} 
.tip.left:after { 
    border-top: 12px solid transparent; 
    border-right: 12px solid #fff; 
    border-bottom: 12px solid transparent; 
    left: -24px; 
    top: 22px; 
} 

<img src="image.jpg" width="80" height="80" alt=" hgell" hspace="20"> 

<div style="padding:50px"> 
    <div class="tip left"> 


    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur quam a sapien egestas eget scelerisque lectus tempor. Duis placerat tellus at erat pellentesque nec ultricies erat molestie. Integer nec orci id tortor molestie porta. Suspendisse eu sagittis quam. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur quam a sapien egestas eget scelerisque lectus tempor. Duis placerat tellus at erat pellentesque nec ultricies erat molestie. Integer nec orci id tortor molestie porta. Suspendisse eu sagittis quam. 
    </div> 
</div> 

Answer 1

です画像は自分のクラス/ idを取得する） このパディングを削除する

<div style="padding:50px"> 

と920pxの下に幅のスクリーンに、それはまだ（width: 920px !important;）

以前のように表示されますので注意してくださいあなたは、左の画像をフロートする必要がfiddle

Answer 2

を参照してください。

注私はこのスピンネットを試してみました。

img { 
 
    display: inline-block; 
 
    float: left; 
 
    } 
 
.left { 
 
    width: 920px !important; 
 
    padding-bottom: 40px; 
 
    min-height: auto !important; 
 
    padding-right: 0; 
 
    float: left; 
 
} 
 

 
.left > p:first-of-type { 
 
    background: #ffd987; 
 
    font-style: italic; 
 
    padding: 5px 10px; 
 
    margin-bottom: 40px; 
 
} 
 

 
.tip { 
 
    background: #fff; 
 
    border: 1px solid #ccc; 
 
    padding: 10px; 
 
    font-size: 1.2em; 
 
    position: relative; 
 
    width: 200px; 
 
} 
 

 
.tip:before { 
 
    position: absolute; 
 
    top: -14px; 
 
    left: 98px; 
 
    display: inline-block; 
 
    border-right: 14px solid transparent; 
 
    border-bottom: 14px solid #fff; 
 
    border-left: 14px solid transparent; 
 
    border-bottom-color: rgba(0, 0, 0, 0.2); 
 
    content: ''; 
 
} 
 

 
.tip:after { 
 
    position: absolute; 
 
    top: -12px; 
 
    left: 99px; 
 
    display: inline-block; 
 
    border-right: 12px solid transparent; 
 
    border-bottom: 12px solid #fff; 
 
    border-left: 12px solid transparent; 
 
    content: ''; 
 
} 
 

 
.tip.left:before { 
 
    border-top: 14px solid transparent; 
 
    border-right: 14px solid #fff; 
 
    border-bottom: 14px solid transparent; 
 
    border-right-color: rgba(0, 0, 0, 0.2); 
 
    left: -28px; 
 
    top: 20px; 
 
} 
 

 
.tip.left:after { 
 
    border-top: 12px solid transparent; 
 
    border-right: 12px solid #fff; 
 
    border-bottom: 12px solid transparent; 
 
    left: -24px; 
 
    top: 22px; 
 
}

<img src="http://uk.rs-online.com/catimages/F0108038-01.jpg" width="80" height="80" alt=" hgell" hspace="20"> 
 

 
<div style="padding:50px"> 
 
<div class="tip left"> 
 

 

 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur quam a sapien egestas eget scelerisque lectus tempor. Duis placerat tellus at erat pellentesque nec ultricies erat molestie. Integer nec orci id tortor molestie porta. Suspendisse eu sagittis quam. 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur quam a sapien egestas eget scelerisque lectus tempor. Duis placerat tellus at erat pellentesque nec ultricies erat molestie. Integer nec orci id tortor molestie porta. Suspendisse eu sagittis quam. 
 
</div> 
 
</div>