Wrapping table content around a floating div across multiple rows

问题

Part-way down my page I have a table with two columns and multiple rows, each containing varying amounts of dynamically generated text.

I would like to float a div (of fixed size) so that it spans as many rows of the second column as may be necessary from the top-right corner, with lines of text wrapping around it as required.

So if, for example, the bottom of the div is half-way down the third row, the text in that row should wrap around the left and bottom edges of the div.

I hope this makes sense. Can anyone please help?

回答1:

I don't believe that would be a correct usage of table element. To solve your problem it will be better to use div or p elements. If you float right the red element, those that follow will wrap around it. If you want to use table you may consider using third column or position absolute div next to the table.

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>

来源：https://stackoverflow.com/questions/39499871/wrapping-table-content-around-a-floating-div-across-multiple-rows

标签

html

css

css-float

css-tables

word-wrap