容器底部的元素，不会在容器中覆盖文本

问题描述

我想在容器右下角的另一个div中放置一个div。容器将包含文本，我不希望内部div覆盖文本。内部div必须始终保持其空间，但外部div的其余部分将包含文本。

这说明了我的意思。蓝色是内部div，橙色是外部div。

这是我到目前为止所拥有的：

.received_withd_msg { 
  display: inline-block;
  max-width: 65%; 
  min-width: 10%;
 }

.inner {
  position: absolute;
  right: 0px;
  bottom: 5px;
  color: #646464;
  font-size: 10px;
  margin-top: auto;
  padding-left: 12px;
  min-width: 45px;
}

解决方法

这是一个简单的技巧，您可以插入div并在外部调整div，但具有相同的背景颜色作为div.container上的主要颜色，并使用称为before的伪元素或在after选择器之后编辑div之外的main内所有文本的一部分（{{ 1}}）不会覆盖div.container

示例

div.inner

.container {
  width: 250px;
  height: 255px;
  background: orange;
  position: relative;
  word-break: break-all;
}

.inner {
  width: 30px;
  height: 255px;
  background: orange;
  position: absolute;
  bottom: 0;
  right: -30px;
}

.inner::before {
  content: "";
  width: 30px;
  height: 30px;
  background: blue;
  position: absolute;
  bottom: 0;
}

css-position html