将表格内容围绕多行的浮动div进行包装 [英] Wrapping table content around a floating div across multiple rows

问题描述

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

我想浮动一个div（固定大小），以便跨越右上角可能需要的第二列的行数，并根据需要用文本行包围它。

因此，例如，如果div的底部在第三行中间，那么该行中的文本应该围绕div的左边缘和底部边缘。

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

解决方案

我不相信这会是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; row-right：2px solid＃000;}。row：last-child {border-bottom：2px solid＃000;}＃table p：first-child {position：absolute;顶部：0;底部：0;左：0;宽度：20％;填充：2％; border-right：2px solid＃000;} #table p：nth-​​child（2）{margin：0 0 0 24％;宽度：71％;}＃rightColumn {border：2px solid＃000;位置：相对; z-index：1; float：right;背景：＃ff0000;宽度：20％; margin：0 0 2px 2px;}  

< div id = 包装 > < div id =rightColumn> < p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本< / p> < / DIV> < div id =table> < div class =row> < p>文字文字< / p> < p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文字文字文字文字文字文字文字文字文字文字文字文字文字文字< / p> < / DIV> < div class =row> < p>文字文字< / p> < p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本< / p> < / DIV> < div class =row> < p>文字文字< / p> < p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本< / p> < / DIV> < div class =row> < p>文字文字< / p> < p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本< / p> < / DIV> < div class =row> < p>文字文字< / p> < p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本< / p> < / DIV> < / div>< / div>

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?

解决方案

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>

这篇关于将表格内容围绕多行的浮动div进行包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！