移动窗口的页面元素调整大小

时间:2013-01-30 14:00:55

标签: css

作为CSS的新手,我在stackoverflow上查看了有关此问题的类似帖子,但没有一个解决方案似乎对我的网站有所帮助。

我正在使用网站的模板并尝试编辑CSS,以便页面保持一个宽度,而不是在调整窗口大小时移动它的元素。

可在此处找到示例页面:(已删除客户端链接)

内容包含在当前设置为相对位置的包装中:

#page_wrapper 
{
    position: relative;
}

我试图将其更改为:

#page_wrapper 
{
min-width: 960px;
}

这似乎并没有成功。当我调整窗口大小时,一切都在变化。还有什么想法我还需要改变吗?

3 个答案:

答案 0 :(得分:1)

您的网站正在使用Twitter Bootstrap:twitter.github.com/bootstrap /

做一个你想做的事情并不是一个完全简单的过程,但起点就是这个页面:

http://twitter.github.com/bootstrap/customize.html

您可以取消选中“响应”复选框,并将网格系统元素更改为您想要的任何选项。然而,最好将它们保留原样。

然后下载css文件并替换您网站上的文件并查看是否有帮助(确保首先备份当前文件)。

答案 1 :(得分:1)

这里有一些事情发生:

  1. 导航在某个地方有float: right这意味着当它的宽度加上它旁边的任何东西的宽度都比它的容器宽时,它会去移动以使其适合。
  2. 您的最小宽度太窄如果您的最小宽度是960px,但导航的宽度加上徽标的宽度(并排放置的两个元素),再加上任何边距,填充和边框,加起来超过960px,然后它就不会排成一行。您需要调整最小宽度,或调整元素的计算宽度以适应最小960px。这可以通过缩小边距/填充,减小文本大小,设置显式宽度或其任何组合来完成。

答案 2 :(得分:0)

您的元素可能会移动,因为您将它们放在相同的

标记中,因此如果您希望元素保持其位置,则需要使用不同的

对于每个元素,并将它们与您的偏好对齐,可能在css上或在标记内(由您自己决定)。否则在div标签中如果对每个元素执行相同的步骤

,则不应该有任何问题。这也适用于句子......你需要让句子中的每个单词都在单个

之间