Question

如何在文本中包含

div

？

目标是看起来像..


text|text|text|text|text|text|text|text|text|
text|text|text|text|text|text|text|text|text|
         |text|text|text|text|text|text|text|
         |text|text|text|text|text|text|text|
         |text|text|text|text|text|text|text|
text|text|text|text|text|text|text|text|text|
text|text|text|text|text|text|text|text|text|

div在文字之前
text是段落
即<div></div><p></p>

我尝试过浮动div并添加margin-top但文本不会包含在div之上。我尝试过position：relative和position：绝对是重叠的（不是文本换行）。

由于

Answer 1

检查一下！我正在使用shape-outside属性。

＆＃13;

<html>
<head>
	<title>This is the title</title>
	<style>
body {
  max-width: 500px;
  font-size: 30px;
}
div {
  -webkit-shape-outside: inset(100px 40px 40px 0px);
          shape-outside: inset(100px 40px 40px 0px);
  width: 142px;
  height: 200px;
  float: left;
}
</style>
</head>
<body>
	<div></div>
	<p>
		|text|text|text|text|text|text|text|text|text|
		|text|text|text|text|text|text|text|text|text|
		          |text|text|text|text|text|text|text|
		          |text|text|text|text|text|text|text|
		          |text|text|text|text|text|text|text|
		|text|text|text|text|text|text|text|text|text|
		|text|text|text|text|text|text|text|text|text|
	</p>
</body>
</html>

＆＃13;

参考：shape-outside Property

Answer 2

按shape-outside Property.According MDN web docs

shape-outside CSS属性使用形状值来定义float的浮动区域，并使内联内容环绕形状而不是float的边界框。

在您的情况下，您希望获得矩形形状，因此有inset()函数可以执行此操作

shape-outside: inset(50px 50px 50px 10px);

以下是CSS-Tricks的pen

在CSS中间的文本中包装<div>

2 个答案: