Html 如何使网页在窗口变小/变大时不发生变化

我目前正在尝试为我的大学作业制作一个网站，我遇到了以下问题：

当我的网站在浏览器中打开时，如果我将窗口缩小，所有的图片和文本都会乱七八糟。例如，将窗口变大会使图片脱节，而文本会变长。 我想让它变得更大，无论什么时候你把窗口变大，文本+图片都会保持在中间，在它们的左右两边留下相同的空间，这样看起来就不那么愚蠢了

代码：

.满足于{
字体系列：无衬线；
宽度：50%；
身高：100%；
填充：0px 10px 0px 10px；
利润上限：-10px；
}
#容器{
}
.关于年龄{
浮动：对；
宽度：50%；
}
#imageOne{
高度：250px；
浮动：对；
右边距：200px；
边缘顶部：-145px；
显示：相对；
边框：3倍白色；
宽度：440px
}
#图像二{
高度：250px；
浮动：对；
宽度：440px；
边缘顶端：40px；
右边距：200px；
边框：3倍白色；
}

关于我们
哎

基本思想是将它们放在一个具有设置宽度的容器中，而不是直接放在默认宽度为

100%

的

下（而是

自动

，默认宽度为父级宽度的100%）

关于我们
哎

然后给

.top-level container

一个像素宽度（或

最大宽度

/

最小宽度

），如果您希望它在浏览器调整大小时有一些自由度的话

---

请注意，移动用户比桌面用户多，因此不要区分屏幕较小的用户！

如果您不想使其具有响应性，则应将宽度从%更改为px（contentAbout）

---

如果它只是一个内部项目，如果没有响应就可以了。

您需要使用媒体查询查看此链接以了解更多信息：

---

“响应性设计”是关键词——你会得到很多结果……我认为OP的目的恰恰相反，一定是怀旧。

<div class="top-level-container">
    <div class = "contentAbout">
        <h2 id = "aboutUs">About us</h2>
        <p> Hey</p>
    </div>
    <div class = "aboutImages">
        <img id = "imageOne" src = "http://i.imgur.com/6kbSaGL.png" alt = "Car"/>
        <img id = "imageTwo" src = "http://i.imgur.com/SEl4ssJ.png" alt = "Car"/>
    </div>
</div>