Question

我想围绕另一个兄弟div（不是嵌套DIV ）包装div的内容

下面的代码示例非常接近。但我需要的是左侧DIV的内容，因此向下滑动足以允许右侧DIV的几行内容流过顶部（就像在底部一样）

这是一个完整的HTML文档，演示了到目前为止工作的内容，除了顶部的文本。

div.wrapper {
  width: 500px;
}
div.Cover {
  float: left;
  width: 250px;
  height: 350px;
  margin: 10px;
  padding: 10px;
  border: 3px solid orange;
  background-color: aqua;
}
div.Content {
  padding: 5px;
}

<div class="wrapper">
  <div class="Cover"></div>

  <div class="Content">text text text text text text text text text text text text text text text text text text text text text</div>
  <div class="Content">text text text text text text text text text text text text text text text text</div>
  <div class="Content">text text text text text text text text text text</div>
  <div class="Content">text text text text text text text text text text text text text text text text text text text</div>
  <div class="Content">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>
  <div class="Content">text text text text text text text text text text text text text text text</div>
  <div class="Content">text text text text text text text text text text text text text text text text</div>
  <div class="Content">text text text text text text text text text text text text text text text text text text</div>
  <div class="Content">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>
  <div class="Content">text text text text text text text text text text text text text text text text text text text text text text</div>
</div>

Answer 1

如果html解决方案足够，只需将该div放在html中的几个Content div下。

在：

<div class="Cover"></div>
<div class="Content">text text text text text text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text</div>

后：

<div class="Content">text text text text text text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text</div>
<div class="Cover"></div>

我不确定是否有css解决方案。边缘顶部，顶部，两者都清理空间但不允许浮动元素过去。

这只意味着浮动的div相对于文本内容而不是页面。

Answer 2

我认为你真正想要但不能使用的是CSS排除：https://www.w3.org/TR/css3-exclusions/。在撰写本文时，它们仅在IE / Edge中受支持，并且仅使用-ms前缀。

本文介绍了一些实际示例：http://www.html5rocks.com/en/tutorials/regions/adobe/。

Answer 3

如果您能够在html之后的任何地方粘贴此内容，则可以使用javascript完成相同的操作。

{{1}}

在DIV周围包裹DIV的内容

3 个答案: