如何将我的标题框移动到图像底部答案

【问题标题】：How to move my headline box to the bottom of image如何将我的标题框移动到图像底部
【发布时间】：2018-05-14 21:19:52
【问题描述】：

我知道这并不短，但我刚接触 css，现在大约 2 周内我无法解决这些问题......

我无法将.headline-box 移动到图像底部。我试图改变我的显示和玩，块，弯曲，网格并将其更改为行/列对齐/对齐但没有。我试着把位置换成bottom: 0 一个蹲...

谁能告诉我如何解决它？你这个解决方案呢？

为什么我什么都没做？

为什么当我给出位置时：相对于这个类，它在图像之后，向下..？

除此之外，我真的可以使用帮助来让我的代码更简单...

我发布了链接，但这是网址：

Codepen

谢谢大家:)

【问题讨论】：

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用
顺便说一句，这就是对齐/对齐在网格和弹性上不起作用的原因吗？还有 3 件事我不明白... 1。当我缩小浏览器以检查响应时，文本开箱即用。我想是因为没有更多的空间。我是正确的？ 2. 当我在@media 中更改字体大小等内容时，它的效果也在媒体之外..你知道为什么吗？

标签： css flexbox css-grid

【解决方案1】：

我如您所愿将您的.headline-box 移至底部。问题是由几件事引起的，最重要的是你的 header/container-fluid/row 没有高度，并且因为你的身体也没有高度，所以这样做无论如何都不会产生结果。

我做了以下事情：

body & html 现在的高度为 100%（总是这样做！）
header 的高度也为 100%。
从您的 html 中删除了图片并将其作为 background-image 应用到您的标题中。
您的.headline-box 现在有bottom: 0，现在将其置于底部。
我对您的代码进行了重大清理，并省略了以下不必要的项：
- 额外的<section> 只需一个h3。
- <div id="main img-div"> 没有结束标签。
- 也是不必要的，因为您已经将内容整齐地放在 header 和 section(s) 中。

这是更新后的Codepen。

如果您还有任何问题，请告诉我:)

【讨论】：

顺便说一句，这就是对齐/对齐在网格和弹性上不起作用的原因吗？还有 3 件事我不明白... 1。当我缩小浏览器以检查响应时，文本开箱即用。我想是因为没有更多的空间。我是正确的？ 2. 当我在@media 中更改字体大小之类的东西时，它的效果也在媒体之外..你知道为什么吗？ 3. 还是不明白为什么 .headline position: relative 中的文字出图了
我没有关于网格的问题的答案。 1. 是的，您可以使用媒体查询来解决这个问题。 2. 这不应该发生，所以这可能是您的媒体查询中的错误。 3. 你能说得更具体一点吗？也许有一张照片？如果答案回答了您最初的问题，您可以将其标记为已接受的答案吗？谢谢:)
如何标记它？对不起，我是新来的 :) 3. 当图像在标签中而不是作为背景时，我给了我的 .headline... 相对而不是绝对， txt 在图像之后，同样的事情, 为什么把图片移到背景图片上？
3.不，您可以根据需要将其放回 HTML 中，并对 CSS 中的图像应用必要的样式，但我认为在 CSS 中设置背景图像是更好的做法。这种方式更容易控制大小，比如background-size: cover。还有一些小的变化，比如将红色边框放在标题而不是图像上。代码更干净，更容易更改。 - 谢谢！
嗯...在我的桌面上查看后，我意识到这样，图像不是全高..我可以按照你的方式修复它吗？如果我想将其应用于 img 标签，我该怎么做？这是我的笔，在我进行了几次更改之后，它没有得到底部的“0”和另外一件事，我不知道为什么，就像我向下滚动时，（在我的笔 - 编辑器视图中）盒子垂直浮动，直到它卡在中间:) 以一种令人不安的方式有点有趣......