HTML-Div Kommentar-Box mit Pfeil & Bild

Question

Ich versuche, ein Kommentarfeld mit einem Pfeil zu erstellen. Ich benutze das CSS, aber ich habe ein Problem, das ich nicht lösen kann. Wenn ich das Bild platziere, geht das Kommentarfeld über das Bild. Das Kommentarfeld zeigt nicht auf das Bild. Kann das Kommentarfeld links vom Bild nicht hinzufügen. Kommentarbox zeigt auf Bild. Hier

ist der Code

.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

Sie haben die "float" -Stil auf das Bild anzuwenden:

img{ 
    float:left; 
} 

(wichtig: wenn Sie mehrere haben Bilder bekommen sie eine eigene Klasse/ID) entfernen Sie diese Polsterung

<div style="padding:50px"> 

und sich bewusst sein, dass auf Bildschirmen mit einer Breite unter 920px, wird es nach wie vor (width: 920px !important;)

siehe fiddle

Answer 2

Sie müssen sich auf der linken Seite um das Bild schweben angezeigt.

Hinweis Ich habe das Bild nur für dieses Spinnet geändert.

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>