时间戳

首页 > 解决方案 > 可从底部/顶部调整大小的内容

javascript - 可从底部/顶部调整大小的内容

问题描述

有一个简单的可编辑标题和具有高度限制的段落。标题输入文本字段必须底部对齐，这意味着它应该在输入文本时从底部到顶部调整自身大小。同时段落文本字段从上到下调整大小。我不知道如何使它从底部/顶部调整大小。这是html代码：

<h1 contenteditable="true" style="max-height:70px;overflow:hidden;">
This is a headline</h1>
<p contenteditable="true" style="max-height:70px;overflow:hidden;">
This is a paragraph.</p>

标签： javascripthtmlcss

解决方案

像这样的东西？使用 Flexbox 很容易做到：

.container {
  border: #008000 solid 2px;
  display: flex;
  width: 500px;
  height: 100px;
}

.container h1,
.container p {
  flex-basis: 50%;
  overflow: hidden;
  max-height: 70%;
  margin: 0;
  font-size: 16px;
}

.container h1 {
  border: #f00 solid 2px;
  align-self: flex-start;
}

.container p {
  border: #00f solid 2px;
  align-self: flex-end;
}
<div class="container">
  <h1 contenteditable="true">Type more stuff in here</h1>
  <p contenteditable="true">Type more stuff in here</p>
</div>

推荐阅读