运用CSS，实现布局要求，挑战技巧

在HTML和CSS的世界里，常常会遇到需要调整布局的需求。而有位朋友@快叫我韩大人，向我抛出一个有趣的挑战：在不改变HTML结构和元素高度的前提下，实现一种特定的布局效果。在征得他的同意后，我把这项挑战写成了一篇文章，分享给各位读者，看看大家是否能实现。

任务 ：
给定一个HTML结构，如下所示：

<div class="container">
    <div class="header">
        <h1>Title</h1>
    </div>
    <div class="content">
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </div>
    <div class="footer">
        <p>Copyright 2023</p>
    </div>
</div>

现在，我们需要应用CSS样式，使页面的布局满足以下要求：

1. .header 高度为 50px，背景色为蓝色。
2. .content 高度为 100px，背景色为白色。
3. .footer 高度为 20px，背景色为黑色。
4. .container 宽度为 500px，背景色为灰色。
5. 所有的元素都应在同一水平线上。

限制条件 ：

• 不允许改变HTML结构。
• 不允许改变元素的高度。
• 必须使用CSS样式来实现布局。

解决方案 ：

1. 首先，我们需要给容器元素.container设置宽度和背景色：

.container {
  width: 500px;
  background-color: gray;
}

2. 然后，我们给.header元素设置高度和背景色：

.header {
  height: 50px;
  background-color: blue;
}

3. 接着，我们给.content元素设置高度和背景色：

.content {
  height: 100px;
  background-color: white;
}

4. 最后，我们给.footer元素设置高度和背景色：

.footer {
  height: 20px;
  background-color: black;
}

5. 为了让所有的元素都在同一水平线上，我们可以使用 flexbox 布局：

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

这样，我们就实现了布局要求，并且满足了所有的限制条件。

各位读者，你们能实现这个布局效果吗？欢迎在评论区分享你们的解决方案！