Javascript HTML-当我放大/缩小时，我的内容变得混乱

HTML/CSS

HTML代码在home.HTML中 CSS代码位于stylesheet.CSS中

每当我放大我们的页面时，我的内容都会笨拙地移动，并稍微破坏我的页面。我想知道我如何解决这个问题，并努力避免这个问题在未来？该网站的图片可以在这里找到！

---

对HTML还是新手，在大学里才刚刚开始正确地学习它，但我一直非常喜欢它，并且正在考虑把它作为一种职业来追求

分页看起来是使用相邻的float left和float right元素的结果。如果它们的空间不足，您的右侧面板将断开到下一行，但仍向右浮动

您可以实现非响应式布局，使两个面板彼此相邻，并在有空间的情况下使右侧面板与右边距齐平，但如果没有空间，则生成水平滚动条，您可以使用表格布局。不使用标记的演示：

CSS

HTML

---

这可能会对您有所帮助：如果我没有弄错的话，我认为这可能更适合移动设备？使用HTML5 doctype标记，而不是XHTML1过渡。你在用Dreamweaver吗？是的！我相信Dreamweaver CS4？@hungerstar如果源代码是正确的XHTML，那么XHTML doctype没有问题！实际上OP的来源不是，但你明白我的意思。

#panels
{   border: thin solid green; /* to see */
    min-width: 100%;
    display:table;
}
#leftPanel
{    border: thin solid red; /* to see */
     min-width: 40em;
     display: table-cell; 
}
#rightPanelContainer
{   display: table-cell;
    text-align: right; /* right justify */
}
#rightPanel
{   display:inline-block; /* allow panel to be justified */
    border: thin solid blue; /* to see */
    min-width: 20em;
    text-align: left;
}

<div id="panels">
    <div id="leftPanel">
          Left Panel
    </div>
    <div id="rightPanelContainer">
         <div id="rightPanel">
              Right Panel
         </div>
    </div>
</div>