html - 如何使用 Bootstrap 将文本环绕图像？

Question

我想在图像周围环绕文字，如下所示:

我该怎么做？...

如果能提供信息，我将不胜感激。感谢大家。

Answer 1

您可以在相对定位的容器内使用 position: absolute 并使用 top 和 left 属性来对齐它。

.img-circle-wrap {
  position: relative;
  width: 500px;
  height: 500px;
}
.img-circle {
  position: absolute;
  left: 30%;
  top: 30%;
}
.img-circle-wrap span {
  position: absolute;
}
.text-1 {
  top: 20%;
  left: 20%;
}
.text-2 {
  top: 20%;
  left: 70%;
}
.text-3 {
  top: 50%;
  left: 10%;
}
.text-4 {
  top: 50%;
  left: 80%;
}
.text-5 {
  top: 80%;
  left: 20%;
}
.text-6 {
  top: 80%;
  left: 70%;
}
.text-7 {
  top: 20%;
  left: 45%;
}
.text-8 {
  top: 80%;
  left: 45%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="img-circle-wrap">
  <img src="http://placehold.it/200x200" alt="..." class="img-circle">
  <span class="text-1">Text 1</span>
  <span class="text-2">Text 2</span>
  <span class="text-3">Text 3</span>
  <span class="text-4">Text 4</span>
  <span class="text-5">Text 5</span>
  <span class="text-6">Text 6</span>
  <span class="text-7">Text 7</span>
  <span class="text-8">Text 8</span>
</div>