HTML/CSS：如何在调整浏览器窗口大小时使网页保持原样？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24375757/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS: How to make web page stay put when resizing browser window?
提问by Gretta
(Macbook 10.5.8; Safari 5.0.6)
（Macbook 10.5.8；Safari 5.0.6）
Hello, I'm making a website (using MAMP as localhost and Symfony2). However, evertime I resize my browser window, the elements in my web page keep squishing together and going out of place. How do I make it stagnant when resizing the window? I expect it to look like it's "cut off" when resizing. I did not add anything to my code to fix the error because I am a total HTML/CSS beginner.
你好，我正在制作一个网站（使用 MAMP 作为本地主机和 Symfony2）。然而，每当我调整浏览器窗口的大小时，我网页中的元素就会不断挤压在一起并变得不合适。调整窗口大小时如何使其停滞？我希望它在调整大小时看起来像“切断”。我没有在我的代码中添加任何内容来修复错误，因为我是一个完全的 HTML/CSS 初学者。
However, I did find something like overflow:hidden. I tried applying it to my CSS body like so:
但是，我确实找到了类似overflow:hidden. 我尝试将它应用到我的 CSS 主体，如下所示：
body {
overflow: hidden;
}
but nothing happened.
但什么也没发生。
UPDATE
更新
(HTML)
(HTML)
<body>
<div class="container"><img class="header" src="http://www.ushistory.org/data1/images/slide3.jpg"/>
<div><h1>APUSH Buddy</h1></div>
<a class="buttons" id="homelink" href="">Home</a>
<a class="buttons" id="termslink" href="terms">Terms</a>
<a class="buttons" id="listlink" href="presidentslist">President's List</a>
<a class="buttons" id="linkslink" href="links">Links</a>
<a class="buttons" id="songlink" href="song">President's Song</a>
<a class="buttons" id="forumlink" href="http://troyapushkorum.forumotion.com/login">APUSH Forum</a>
<a class="buttons" id="somelink" href="">Something</a>
<h1>President's List Quiz</h1>
<p>Click on a president to take a mini fill-in-the-blank quiz!</p>
</div>
</body>
(CSS)
(CSS)
.container {
width: 960px;
}
.buttons {
width: 13%;
line-height: 200%;
vertical-align: middle;
border-radius: 15px;
text-align: center;
text-decoration: none;
position: absolute;
font-size: 130%;
color: black;
}
}
It worked, but the hyperlink buttons still don't respond to "container". Btw I didn't want to post all my code because there's just too much.
它有效，但超链接按钮仍然不响应“容器”。顺便说一句，我不想发布我所有的代码，因为代码太多了。
回答by imbondbaby
Put your content in a divwith a fixed widthas shown below:
将您的内容放在一个div固定的中width，如下所示：
HTML:
HTML：
<div class="container">
// your code
</div>
CSS:
CSS：
.container {
width: 1000px;
}
