html - 试图将一个框 div 放置在另一个框 div 中

Question

我希望你能帮助我解决这个问题，我试图将一个 div 放在一个 div 中，但一个一直在拉另一个。

我会粘贴一些图片:

这就是我想要完成的... enter image description here

这就是我得到的... enter image description here

一个简单的解释:

我需要这个“褪色”框位于页面中央，然后，我需要这个“NEW WAVE”文本位于所述框内，我遇到的一个问题是如果我将它们放在同一个 div 中，文本继承了“褪色”条件，但如果我将它们放在不同的 div 中，“褪色”框会将文本的 div 向下推。我想我已经尝试了通常的方法来解决这个问题，但没有任何反应，然而，我只是从 HTML 和 CSS 开始，所以很明显我遗漏了一些东西。

现在我将留下 HTML 和 CSS:

HTML:

<div class="dimmed">
            <div class="dim-back"></div>
            <div class="new-wave">
              <h2>NEW WAVE</h2>
            </div>

        </div>

CSS(对于这个，我将发布一张图片):

enter image description here

谢谢。

Answer 1

好的，因为您还没有显示您的 CSS。

我在使用 Bootstrap 时通常会犯的主要错误是我开始和关闭 div 标签

你现在的结构恰好是这样的。

<div class="dimmed">
            <div class="dim-back"></div>
            <div class="new-wave">
              <h2>NEW WAVE</h2>
            </div>

        </div>

尝试像这样嵌套您的 div 标签

<div class="dimmed">
            <div class="dim-back">
            <div class="new-wave">
              <h2>NEW WAVE</h2>
            </div>
        </div>
     </div>