Question

我们可以修复底部并通过增加顶部来增加高度，同时添加一些文本来阻止吗？

例如：

＆＃13;

.outer {
  position: relative;
  min-height: 100px;
  border: 1px dashed #CCC;
  width: 200px;
  float: left;
}
.outer > p {
  
  width: 200px;
  min-height: 150px;
  border: 1px dashed red;
  display: flex;
  vertical-align: bottom;
  align-items: flex-end;
}

＆＃13;

<div class="outer">
    <p>
      My text block <br> 
      My text block <br> 
      My text block <br> 
      My text block <br> 
      My text block <br> 
      My text block <br> 
      My text block <br> 
      My text block <br> 
      My text block <br> 
    </p>
</div>

<div class="outer">
    <p>
      My text block <br> 
      My text block <br> 
        fghfgh<br>
    </p>
</div>

＆＃13;

用于显示：行，块完全显示文本但显示：绝对不是

Answer 1

我不确定您的要求是什么，但这是一种可能的解决方案。在父元素上使用ActiveRecord::StatementInvalid: Mysql2::Error: Unknown column 'task_status_updates.status' in 'having clause'，包含您希望文本从下到上增长的文本块的元素，然后在带有文本的块上使用position: relative;。

一个例子。

position: absolute;

.outer {
  position: relative;
  min-height: 300px;
  border: 1px dashed #CCC;
}
.outer > p {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

Answer 2

目前还不清楚你要做什么，但根据底部内容增加高度需要将内容放在底部。

在这里，flexbox可以提供帮助：

div {
  width: 200px;
  min-height: 150px;
  border: 1px dashed red;
  display: inline-flex;
  vertical-align: bottom;
  align-items: flex-end;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum autem perferendis cum ducimus sint, accusantium!
</div>

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores blanditiis esse cumque deserunt optio modi, molestias quaerat officia consequatur adipisci repellendus corrupti ea pariatur similique laborum dolorum ipsum accusamus, sit omnis ullam ipsam
  ipsa?
</div>

我认为父母应该对齐，所以最好将它们inline-flex和垂直对齐到底部。

类似的结果可能只能使用inline-block和相同的垂直对齐...取决于实际要求。

如何从下往上拉伸/拉块？

2 个答案: