html - 围绕多行的 float div 包装表格内容

Question

在我的页面中，我有一个包含两列和多行的表格，每行包含不同数量的动态生成的文本。

我想 float 一个 div(固定大小)，以便它从右上角开始横跨第二列的尽可能多的行，并根据需要在其周围环绕几行文本。

因此，例如，如果 div 的底部位于第三行的中间位置，则该行中的文本应环绕 div 的左侧和底部边缘。

我希望这是有道理的。有人可以帮忙吗？

Answer 1

我认为这不是 table 元素的正确用法。要解决您的问题，最好使用 div 或 p 元素。如果你向右浮动红色元素，后面的元素将环绕它。如果您想使用表格，您可以考虑使用第三列或表格旁边的位置绝对 div。

p {
  margin: 0;
  padding: 10px;
}
#wrapper {
  width: 500px;
}
.row {
  position: relative;
  border-top: 2px solid #000;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
}
.row:last-child {
  border-bottom: 2px solid #000;
}
#table p:first-child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 20%;
  padding: 2%;
  border-right: 2px solid #000;
}
#table p:nth-child(2) {
  margin: 0 0 0 24%;
  width: 71%;
}
#rightColumn {
  border: 2px solid #000;
  position: relative;
  z-index: 1;
  float: right;
  background: #ff0000;
  width: 20%;
  margin: 0 0 2px 2px;
}

<div id="wrapper">
  <div id="rightColumn">
    <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</p>
  </div>
  <div id="table">
    <div class="row">
      <p>text text text</p>
      <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 text text text</p>
    </div>
    <div class="row">
      <p>text text text</p>
      <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 text text text</p>
    </div>
    <div class="row">
      <p>text text text</p>
      <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 text text text</p>
    </div>
    <div class="row">
      <p>text text text</p>
      <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 text text text</p>
    </div>
    <div class="row">
      <p>text text text</p>
      <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 text text text</p>
    </div>
  </div>
</div>