【问题标题】：Issues Regarding the Resizing of HTML Elements关于调整 HTML 元素大小的问题
【发布时间】：2013-11-28 02:58:25
【问题描述】：

我之前问过这个问题，并得到了一个有效的、有效的答案。尽管我当前的问题似乎不受此处提供的结果的影响：

My Webpage Won't Retain it's Width When Narrowed

根据我在这里收到的答案，我（和其他人）屏幕顶部的横幅保留了半尺寸窗口中最大化窗口的 100% 尺寸。

通俗地说，横幅在不同的窗口中保持相同的大小。

现在我遇到了一个更令人困惑的问题... 页面上的其他元素（特别是 div）不会保留相同的功能，即使它们包含在我在链接中介绍的包装 div 中。

我决定只包含一个指向包含我的 .HTML 和 .CSS 以及图像的 .zip 的链接，而不是用源代码向您的页面发送垃圾邮件 - 以便提供最准确的可视化我正在经历什么。

源代码：https://www.dropbox.com/s/41p4uqu5qowotgk/CSwebpage.zip

感谢您的帮助！

【问题讨论】：

首先，如果您最后一个问题的答案是正确的，您应该将其标记为正确，以便回答它的人得到一些认可。其次，您需要创建一个“jsfiddle”或“JSBin”示例来显示孤立的问题，而不是要求我们下载一个 zip 文件并在本地处理该代码。如果它与另一个问题的代码相同，那么您已经编写好了，对吧？
会的！我很快就会有另一个带有链接的评论！
这应该是代表我得到的 JSfiddle 的链接：
link 我必须上传并链接我正在使用的图像，因为它不再是本地的。
不确定我是否完全明白这个问题。您希望其他 div 保留什么“功能”。就目前而言，您的 #slideshowBox 具有设定的宽度，因此它也将保留。另外两个有百分比宽度，所以它们会缩放。

标签： html css resize window webpage

【解决方案1】：

好的，所以我做了一种 hacky 的方法，但我解决问题的方法是创建 #wrapper div 中的一个 div，编号为 #hacker。然后我把你的最小宽度 900px 放在那个 div 上，它工作得很好。但它把你绝对定位的#quotebox 扔到了页面底部的边缘。因此，为了部分修复它，将其规则替换为：

qouteBox{

width: 48.6%;
float: right;
border: 1px dashed #7FFF00;
height: 35px;
position: relative;
top: -30px;
right: 8px;

}

这将使它足够接近，以便您能够对其进行微调。

如果这有帮助，请告诉我！

编辑#1：对不起，我忘了告诉你在 900px 最小宽度设置之后添加 !mportant 规则：

黑客 {quotebox: min-width:900px !important}

这将覆盖所有其他通用和特定 css 规则。

【讨论】：

我仍然收到错误消息。为了进一步解释我的错误，当我全屏打开网页时 - 它工作正常。但是，如果您有 Windows 7+ 或 Mac 版 BetterSnapTool，您会注意到，如果将窗口移动到屏幕的一侧以将其调整为显示器宽度的 50%，则整个网页的格式会出现错误。如果您想要最正确地重现我所得到的内容，我在 Dropbox 上的 .zip 链接仍然在我原来的帖子中。我在原始帖子下方的 cmets 中发布的 JSfiddle 也提供了一个非常接近的示例。
我遗漏了部分解决方案...检查编辑，看看是否有效。