Question

在此CodePen：https://codepen.io/dannyrb/pen/ORqvZy中，我希望在标题（“ FULL STACK”）正下方添加元素（例如，分隔线和更多文本）。但是，当我添加类似

<h1 class="title">Full Stack</h1>
<p style="color:white;"> Sample Text. Sample Text. Sample Text.</p>

该示例文本显示在容器下方（在山下）。如何将其直接添加到标题下（无需手动使用位置：绝对）？

Answer 1

只需将所有文本包装在div中，然后将该div放在容器中即可。因此，如下所示：

<div class="container-text">
  <h1 class="title">Full Stack</h1>
  <p>HI</p>
</div>

然后您的CSS将是

.title {
  font-family: 'Megrim', Georgia, serif;
  font-size: 50px;
  line-height: 50px;
  letter-spacing: .3em;

  /* Smooth our font */
  text-transform: uppercase;
  text-shadow: 1px 2px 1px rgba(black, .2);
   -webkit-font-smoothing: antialiased;

  margin: 0; padding: 0;
}

.container-text{
  position:absolute;
  text-align:center;
  top:20%;
  width:100%;
  color:white;
  z-index: 100;
}

Answer 2

是的，我同意先前的回答。在代码笔上使用.title类时，我将其重新分配给DIV并将H2和P元素放入其中。我还将div.title元素的font-size和line-height转换为使用EM，以便您可以轻松地对H2和P元素进行样式设置以品尝。

如何将元素直接放在元素下面

2 个答案: