javascript - HTML - 当我放大/缩小时我的内容变得困惑

Question

http://pastebin.com/1Yz1aF1S HTML/CSS

HTML 代码在 home.html 中CSS 代码在 stylesheet.css 中

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

对 HTML 还是个新手，只是在大学才开始正确学习它，但我一直非常喜欢它，并且正在考虑将其作为职业来追求!

Answer 1

页面“中断”看起来是使用彼此相邻的向左浮动和向右浮动元素的结果。如果它们的空间不足，您的右侧面板会跳到下一行，但仍向右浮动。

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

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>

关于javascript - HTML - 当我放大/缩小时我的内容变得困惑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33045526/

上一篇：css - 背景图像未显示在 css 中

下一篇：css - 让一个 div 在我的页面上一直向下延伸？

相关文章：

javascript - 如何使用 Niceedit 编辑器获取 "upload image"字段

javascript - PHP - 阻止攻击者在输入框中使用 javascript

javascript - javascript if 和 else 的问题

javascript - 单击后立即删除单击事件处理程序

javascript - dimple.js addColorAxis 阻止图例渲染

javascript - 理解JS的Object.create函数

html - Kendo Grid - 背景颜色在 alt 行上溢出半径

javascript - scrollTop 不适用于 2 个运算符(operator)

css - 如何定位 css 中的下一个元素？

javascript - 如何在 JavaScript 中创建按钮？并使用 OpenERP 方法的按钮？

©2023 IT工具网  联系我们

标签的演示: