写在 div 问题因为在 css 之后/之前答案

【问题标题】：write in div issue because of after/before in css写在 div 问题因为在 css 之后/之前
【发布时间】：2016-08-24 18:14:52
【问题描述】：

我有一个使用 html 和 css 创建便笺的代码。但是当我想在黄色区域写任何东西时我遇到了问题。

#slm {
  width: 200px;
  vertical-align:100%;
  height: 150px;
  border-radius: 0 0 10% 0/0 0 40% 0;
  background-color: yellow;
  positon: relative;
}
#slm:before {
  content: '';
  display: block;
  positon: absolute;
  width: 50px;
  height: 170px;
  border-radius: 0 0 80% 0/0 0 50% 0;
  background-color: white;
}

<div id="slm">
   
      slm<br>
      Hi
</div>

谢谢。

【问题讨论】：

你要求为你做代码！

标签： html css css-position pseudo-element

【解决方案1】：

首先，您的代码中有一个错字：您写的是位置而不是位置！

其次，您需要为 CSS 中的两个 ID 定义“位置”规则的顶部和左侧属性。

然后我会为#slm 元素添加一些填充，并减少一些宽度。那应该会给你你想要的结果：

示例：https://jsfiddle.net/0wrkzvzp/

#slm {
  width: 120px;
  vertical-align:100%;
  height: 150px;
  border-radius: 0 0 10% 0/0 0 40% 0;
  background-color: yellow;
  position: relative;
  top:0; left:0;
  padding-left: 80px;
}
#slm:before {
  content: '';
  display: block;
  position: absolute;
  top:0; left:0;  
  width: 50px;
  height: 170px;
  border-radius: 0 0 80% 0/0 0 50% 0;
  background-color: white;
}

【讨论】：

【解决方案2】：

首先，您在position 样式中有错字。

在sticky 区域内使用absolute 定位文本，方法是将其包装在一个div 中。

#slm {
  width: 200px;
  vertical-align:100%;
  height: 150px;
  border-radius: 0 0 10% 0/0 0 40% 0;
  background-color: yellow;
  position: relative;
}
#slm:before {
  content: '';
  display: block;
  position: absolute;
  width: 50px;
  height: 170px;
  border-radius: 0 0 80% 0/0 0 50% 0;
  background-color: white;
}

.text{
      position: absolute;
    top: 10px;
    left: 54px;
    width: 140px;
}

<div id="slm">
   <div class="text">
      slm<br>
      Hi
   </div>
</div>

【讨论】：

【解决方案3】：

我认为您正在寻找这样的解决方案：https://jsfiddle.net/neya0v76/4/

将文本包装在 <p> 标记中，并将其设置为 absolute 位置，如下所示：

HTML

<div id="slm">
  <p>slm<br> Hi</p>
</div>

CSS

#slm p {
  position: absolute;
  top: 0;
  left: 70px;
}

【讨论】：

【解决方案4】：

你必须使用position 而不是positon！

最好为你的文本准备一些容器。

试试这个：

HTML：

<div id="slm">
  <div class="inner">
    slm
    <br>
    hi
  </div>
</div>

CSS：

#slm {
  width: 200px;
  vertical-align:100%;
  height: 150px;
  border-radius: 0 0 10% 0/0 0 40% 0;
  background-color: yellow;
  position: relative;
}
#slm:before {
  content: '';
  display: block;
  position: absolute;
  width: 50px;
  height: 170px;
  border-radius: 0 0 80% 0/0 0 50% 0;
  background-color: white;
}

#slm .inner{
  width: 180px;
  margin-left: 55px;
}

工作示例：https://jsfiddle.net/jxsrp86t/2/

【讨论】：

【解决方案5】：

尝试以下方法：

#slm {
  width: 200px;
  vertical-align:100%;
  height: 150px;
  border-radius: 0 0 10% 0/0 0 40% 0;
  background-color: yellow;
  position: relative;
}
#slm:before {
  content: '';
  display: block;
  position: absolute;
  width: 50px;
  height: 170px;
  border-radius: 0 0 80% 0/0 0 50% 0;
  background-color: white;
}
.text{
  top: 35px;
  position: absolute;
  position: inherit;
  text-align: center;
}

<div id="slm">
      <div class="text">slm</div>
      <div class="text">hi</div>
</div>

【讨论】：