我该如何解决我的容器和 div 盒子的大小调整问题

Question

如果有另一个线程包含此答案作为免责声明会很棒

请参考视频了解我的问题。我希望 div 和 header 在我变大或变小时按比例调整大小。问题是，当我调整 div 和 header 的大小时，它们彼此不对齐，看起来很奇怪。

媒体查询是唯一的解决方案吗？

这里有一个 imgur 视频 link 可以看到这个问题。

这是我目前拥有的代码。

构建设计时，容器框是橙色的，仅用于导航目的。盒子到最后不会有颜色。

html {
   background-color:#0000ff;
  }
  #container {
   background-color:orange;
   width:100%;
  }
  #title {
   text-align:center;
   color:#ffffff;
   box-shadow: #ffffff 0px 0px 10px 10px;
   margin:75px auto;
   width:75%;
   padding:20px 10px 20px 10px;
   border-radius: 5px;
   letter-spacing: 15px;
   font-size:25px;
   line-height: 30px;
  }

  #image {
   width:50%;
   box-shadow:#ff0000 0px 0px 10px 10px;
   margin-left:165px;
  }

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>mockup week three</title>
</head>
<body>
 <div id="container">
 <div id="title">
  Week three
 </div>
 <div id="gif">
<image id="image" src="https://media.giphy.com/media/l41m4rC9j8kMjXB0k/source.gif" width="100%"></image>
 </div>
 </div>
</body>
</html>

Answer 1

试试这个 - 我做了几次 CSS 编辑。

html {
   background-color:#0000ff;
  }
  #container {
   background-color:orange;
   width:100%;
  }
  #title {
   text-align:center;
   color:#ffffff;
   box-shadow: #ffffff 0px 0px 10px 10px;
   margin:75px auto;
   width:75%;
   padding:20px 10px 20px 10px;
   border-radius: 5px;
   letter-spacing: 15px;
   font-size:25px;
   line-height: 30px;
  }

    #gif {
   text-align:center;
   margin:75px auto;
   width:75%;
  }

  #image {
   width:100%;
   box-shadow:#ff0000 0px 0px 10px 10px;
  }

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>mockup week three</title>
</head>
<body>
 <div id="container">
 <div id="title">
  Week three
 </div>
 <div id="gif">
<image id="image" src="https://media.giphy.com/media/l41m4rC9j8kMjXB0k/source.gif" width="100%"></image>
 </div>
 </div>
</body>
</html>

我该如何解决我的容器和 div 盒子的大小调整问题

how do i fix this resizing issue with my container and div boxes

html

css

image

responsive