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

您必须将

"float"样式应用于图像：

img{
    float:left;
}

（重要！：如果您有多个图像，请为它们获取自己的类/ID）删除此填充

<div style="padding:50px">

请注意，在宽度低于 920px 的屏幕上，它仍将像以前一样显示 （ width: 920px !important; ）

见小提琴

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>