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

时间:2018-05-10 08:16:43

标签: css css3 flexbox css-grid

我知道它很短暂,但我在css中很新鲜,我现在无法解决这些问题大约两周......

我无法将.headline-box移到图片的底部。我试图改变我的显示并玩,阻止,弯曲,网格并将其更改为行/列对齐/对齐但没有。我试图改变位置bottom: 0蹲下......

任何人都可以告诉我们如何修复它吗?你有这个解决方案吗?

为什么我没有做过什么工作?

为什么当我给出位置时:相对于这个班级,它是在图像之后,向下看...?

除此之外,我可以真正使用帮助使我的代码更简单......

我发布了链接但是这个网址:

Codepen

谢谢大家:)

1 个答案:

答案 0 :(得分:0)

我按你的意愿将.headline-box移到了底部。问题是由一些事情引起的,最重要的是你的标题/容器 - 流体/行没有高度,并且因为你的身体也没有高度,这样做无论如何都不会产生任何结果。

我做了以下事情:

  • body& html现在的高度为100%(总是这样做!)
  • header的高度为100%
  • 从您的HTML中删除了该图片,并将其作为background-image添加到您的标题中。
  • 您的.headline-box现在有bottom: 0,现在已将其置于底部。
  • 我清理了大量代码并遗漏了以下不必要的项:
    • 只有一个<section>的额外h3
    • <div id="main img-div">没有结束标记。
    • 也是不必要的,因为您已经将内容整齐地放在headersection(s)中。

以下是更新后的Codepen

如果您有任何其他问题,请告诉我们:)