将 table 内容环绕在多行的浮动 div 周围

Question

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

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

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

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

Answer 1

我认为 table 元素的用法不正确。要解决您的问题，最好使用 div 或 p 元素。如果你向右浮动红色元素，后面的元素将环绕它。如果你想使用 table 你可以考虑在 table.

旁边使用第三列或绝对位置 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>

将 table 内容环绕在多行的浮动 div 周围

Wrapping table content around a floating div across multiple rows

html

css

css-float

css-tables

word-wrap