Question

image of what I am trying to do 我正在尝试使图像左对齐，并带有与文本重叠（偏心放置）的彩色文本框。我可以通过用div class = my text-box和css创建div class =“ mycontainer”和css来实现（见下文），但是我似乎无法弄清楚如何使文本环绕彩色文本框。环绕图像，但继续向下推文本框。

.mycontainer {
 position: relative;
 font-family: Arial;
 width: 100%;  
}

.mytext-block {
 position:absolute;
 margin-top: 50px;
 margin-left: 150px;
 background-color:turquoise;
 color: black;
 padding-left: 10px;
 padding-right: 10px;
}

Answer 1

嗨，瑞秋（Rachel），是一种将文本环绕在插入彩色框中的图像上的方法。

.mycontainer {
  position: relative;
  font-family: Arial;
  width: 100%;
  margin: auto;
  max-width: 670px;
}

.mytext-block {
  width: 300px;
  height: 400px;
  float: left;
  vertical-align: middle;
  background-color: turquoise;
  color: black;
}

#image {
  width: 250px;
  height: 100px;
  position: relative;
  float: left;
  left: -190px;
  shape-outside: content-box;
  margin: 140px -170px 0 0;
}

#text {
  font-size: 140%;
  padding: 30px;
}

<div class="mycontainer">
  <div class="mytext-block"></div>
  <img id="image" src="https://lorempixel.com/300/100/">
  <div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellen tesque placerat dolor sed dolor euismod hendrerit. Integer eget elit nibh. Vestibulum posuere. Sed elementum bibendum magna, nec tempus augue egestas quis. Pellentesque lacus justo, vehicula vitae nisl sed, semper euismod dui.
  </div>
</div>
<!-- Click the "Run code snippet" below to see it.  Hope this helps. -->

如何使用彩色文本框在图像周围包裹文本？

1 个答案: