HTML div带箭头和图片的评论框

Question

我正在尝试创建一个带箭头的评论框。我正在使用CSS，但我遇到了一个我无法解决的问题。 当我放置图像的评论框正在下图像。评论框不指向图像。 无法添加图像左侧的评论框。评论框指向图像。

下面是代码

.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

您必须将 “浮动” 样式应用到图像：

img{ 
    float:left; 
} 

（重要：如果您有多个图像得到他们自己的类/ 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>