html - CSS:在 Div 中动态分隔两个元素

Question

我在一个 div 中放置了两个元素，一个是文本区域标签，另一个是时间标签。放置在 div 上的时间标签。当textarea字数少的时候，textarea标签和时间之间的空格就可以了。但是当文本区域包含很多字符时，它会覆盖时间标签，如下图所示

我的挑战是，尽管时间标签中有很多字符，但我如何才能动态地保持文本区域和时间标签之间的距离。 这是显示我的尝试的 CSS 代码

.messages textarea[readonly] {
  font-size: 15px;
  font-family: "Helvetica Neue";
  margin: 0 0 0.2rem 0;
  color: #000;
  word-wrap: break-word;
  resize: none;
  overflow: hidden;
  min-height: 5px;
  height: 1px;
  min-height: inherit;
  background: #c2dfff;
  margin-bottom: 0px;
  z-index: 10;
}

.messages time {
  font-size: 1.0rem;
  color: #696969;
  float: right;
  position: absolute;
  bottom: 10px;
  right: 0;
  z-index: 40;
  padding-right: 5px;
}

这是HTML View

<div class="message">
  <textarea readonly elastic>{{ msg.Content }}</textarea>
  <time datetime="2009-11-13T20:00">{{ humanize(msg.Time) }}</time>
</div>

Answer 1

如果您不介意有时在文本下方显示日期，这可能是一个解决方案:

https://jsfiddle.net/91czko52/1/

基本上，我们在 paraghaph 中创建一个幻影 :after 元素(幻影元素是黑色的 > 应该是透明的)具有相同的 MAX 日期大小(或者可能更多) .所以文本永远不会触及日期。

注意:这也意味着使用“经典”段落元素而不是 textarea:我希望并猜测您可能真的不需要 textarea。