Question

HTML代码位于home.html CSS代码位于stylesheet.css

每当我放大我们的内容时，我的内容会相当笨拙地移动并且会使我的页面有点破碎。想知道我如何解决这个问题并努力避免将来出现这个问题？该网站的图像可以在这里找到！ http://imgur.com/a/MbZkk

仍然是HTML的新手，并且刚刚开始在大学中正确地学习它，但我一直非常享受它，并且正在考虑将其作为一种职业追求！

Answer 1

“break”页面看起来是使用float left和float right元素彼此相邻的结果。如果他们的房间不够，你的右手面板会突破到下一行，但仍然会向右浮动。

您可以实现一种非响应式布局，使两个面板彼此相邻，如果有空间，则将右侧面板与右边距齐平，如果没有，则生成水平滚动条，您可以使用表格布局。不使用＆lt; TABLE＆gt;的演示标记：

CSS

#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;
}

HTML

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

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

1 个答案: