Question

我有一个包含三列的表格。第1列的内容是动态的。它是当天的日程安排，因此每天文本的长度都会发生变化。第2列也是动态的，但每月可能不会频繁改变几次。第3列是静态的，我手动更改信息。

问题是每天其中一列可能有空的空间。在任何给定日期，第1列可以比其他两列更长或更短。我想做的是动态填充空白空间，无论哪一列需要它，以便所有三个都看起来有点平衡。

每列中的文本都有一个div包装器。我的想法是每列末尾的另一个div，可以填充文本或图像，并根据表的整体高度自动缩小或增长。

我搜索了不同的HTML / CSS属性，但尚未找到解决方案。也许我问得太多，但希望有人做过类似的事情。大多数新闻网站似乎甚至在各个部分也做得很好。他们的专栏看起来很平衡。

我不知道这是如何工作的服务器端，因为它需要知道最终的高度，但如果你有一个解决方案，我使用VB，但如果客户端也使用Javascript。但我认为会有一种CSS方式。

编辑：我只是指列的高度，列宽是固定的。搜索谷歌所有我能得到的也是宽度的解决方案，所以也许我要求的无法完成或者还没有完成。我指的是填满列高度的文字数量。为简单起见，我们可以说第1列是唯一改变的。但填充第1列HEIGHT的文本数量可能多于或少于填充其他两列的数据，如果文本较少则在第1列留下空白区域，如果有另外两列则为空白区域比其他两个文本更多的文本。希望能够解决它：）

Answer 1

您没有指定要填充其余列的内容，因此我假设它们只是随机图像。
在这种情况下，解决方案是为每个td指定一个背景图像，并将div放在一个实心背景中。这样，桌子的高度就是它的自然高度（最大文本的高度），不需要额外的技巧。

body {background:#FFE}
table {
  border: 1px outset gray
}
td {
  border: 1px inset gray;
  width: 33.3%;
  vertical-align: top;
  padding: 0;
}
td:first-child {
  background: url(http://lorempixel.com/600/900) repeat;
}
td:first-child + td {
  background: url(http://lorempixel.com/600/901) repeat;
}
td:first-child + td + td {
  background: url(http://lorempixel.com/600/902) repeat;
}
td > div {
  background: #FFE;
  padding: .33em
}

<table>
  <tr>
    <td>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
    </td>
    <td>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </td>
    <td>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </div>
    </td>
  </tr>
</table>

如何动态填充列

1 个答案: