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

Question

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

有人可以给我一些建议吗.当我调整窗口大小时,我希望"对象"保持原样但是要调整大小的窗口.例如,如果我将窗口的左下角向上拖动到左侧,我希望看到右下方的消失和滚动条显示,但左上角的对象将保持在它们所在的位置.

我在看吗？

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

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

请在这里找到html和CSS:http://jsfiddle.net/swati/hCDas/

我已经尝试过防止div移动窗口调整大小,我尝试设置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（厘米）等。固定（有时称为绝对）测量的大小始终相同。像素始终是像素，厘米始终是厘米。

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