html - 在 css 中将 <div> 包装在文本中间

标签 html css

如何包裹

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|

  1. div 在文本之前
  2. 文本是段落
  3. <div></div><p></p>

我试过 float div 并添加 margin-top 但文本没有环绕在 div 之上。 我试过 position:relative 和 position:absolute 是重叠的(不是文字换行)。

谢谢

最佳答案

看看这个!我正在使用 shape-outside属性(property)。

<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>

引用:shape-outside Property

关于html - 在 css 中将 <div> 包装在文本中间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46254253/

相关文章:

html - 一个以上的 html5 数据标签的正确命名约定是什么?

javascript - 使用 JavaScript 循环遍历 HTML 中的数据时遇到问题

javascript - 我无法查看数据类型的所有元素

html - Bootstrap 轮播百分比

css - 较少的混合名称被评估为颜色/颜色

Css 位置文本居中

html - 尝试用 CSS 绘制虚线

javascript - 如何获取 td 的值并将其传递到每个 td 元素的输入中?

javascript - jQuery 拖放

media-queries - 如何在不使用最大宽度的情况下媒体查询视网膜手机的景观?