Question

我对CSS很陌生，我正试图让页面运行起来。我管理成功制作我认为是一个不错的页面，直到我调整大小浏览器窗口然后一切都开始移动。我不知道为什么这发生了!!

请有人给我一些建议。当我调整窗口大小时，我会就像'对象'留在原处但是要调整大小的窗口。对于例如，如果我将窗口的底角向上拖动到左侧，我会期待看到右下方的消失和滚动条出现，但左上角的对象将保持精确的位置他们是。

我能看到吗？

查看我的网页的工作状况：http://aimmds1.estheticdentalcare.co.in/

然后尝试通过向左拖动正确的大小来调整浏览器窗口的大小。然后看看标题中的内容，还有菜单栏......它们跳下来，标题内容也跳了下来然后我溢出：隐藏; ..但据我所知，这一切都不是正确的方法。

请在此处找到html和CSS：http://jsfiddle.net/swati/hCDas/

我已经尝试了prevent div moving on window resize，我尝试设置min-width：820px;对于div标题，主要包含div ..但是没有解决它。

感谢您的帮助。

Answer 1

1 - 从您的BODY CSS中移除边距。

2 - 将所有html包装在包装器<div id="wrapper"> ... all your body content </div>

中

3 - 为包装器定义CSS：

这将把所有内容放在一起，以页面为中心。

#wrapper {
    margin-left:auto;
    margin-right:auto;
    width:960px;
}

Answer 2

您可以使用两种类型的测量来指定宽度，高度，边距等：相对和固定。

相对

相对测量的一个示例是您使用的百分比。百分比与其包含元素相关。如果没有包含元素，则它们相对于窗口。

<div style="width:100%"> 
<!-- This div will be the full width of the browser, whatever size it is -->
    <div style="width:300px">
    <!-- this div will be 300px, whatever size the browser is -->
        <p style="width:50%">
            This paragraph's width will be 50% of it's parent (150px).
        </p>
    </div>
</div>

另一个相对测量是与字体大小相关的ems。

固定

固定测量的一个例子是像素，但固定测量也可以是pt（点），cm（厘米）等。固定（有时称为绝对）测量总是相同的大小。像素始终是像素，厘米总是厘米。

如果您对尺寸使用固定尺寸，浏览器尺寸不会影响布局。

Answer 3

我宁愿使用静态宽度，如果您希望根据屏幕尺寸调整页面大小，可以查看media queries。

或者，您可以在标题，导航，内容等元素上设置最小宽度。

Answer 4

首先，你的html中似乎有很多“错误”，你错过了结束标记，你可以尝试用固定宽度<body>包裹<div style="margin: 0 auto; width: 900px>的内容来实现你拥有的使用body {margin: 0 10% 0 10%}

完成

在调整页面大小时防止div移动

4 个答案:

相对

固定