Html 如何保持网站宽度固定（与屏幕尺寸无关）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5781109/
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
How to keep website width fixed (irrespective of screen size)
提问by Sumit Gupta
I am designing a website. I want my website to be 980px width. I can easily do it on my laptop by setting the rightand leftfields of CSS Box as 15%. But my concern is that, when my website is opened on another PC with no widescreen, that 15% will create a distortion. I want to keep my website at 980px whatever be the screen size may be. Please help!
我正在设计一个网站。我希望我的网站宽度为 980 像素。通过将CSS Box的right和left字段设置为 15%，我可以在我的笔记本电脑上轻松完成。但我担心的是，当我的网站在另一台没有宽屏的 PC 上打开时，那 15% 会造成失真。无论屏幕大小如何，我都想将我的网站保持在 980 像素。请帮忙！
As you can see in the image attached. The boxes are 15% distance from sides. If screen will be shorter for a pc, then these boxes will overlap.
正如您在所附图片中看到的那样。盒子与侧面的距离为 15%。如果 PC 的屏幕较短，则这些框将重叠。
回答by Dustin Laine
Rather than trying to explicitly set the left and right margins, just have it auto center.
与其尝试明确设置左右边距，不如让它自动居中。
<div style="width: 980px; margin: 0 auto; overflow: hidden;">
<div style="float: left; width: 80%;">Left Column</div>
<div style="float: right; width: 20%;">Right Column</div>
</div>
The key is the automargin for left and right. This will horizontally align that 980px div in the center and keeping the width no matter what.
关键是auto左右边距。这将在中心水平对齐 980 像素的 div，并且无论如何都保持宽度。
回答by Tim
I use the following style rules to create fixed-width cross-browser compatible layouts:
我使用以下样式规则来创建固定宽度的跨浏览器兼容布局：
body { min-width: 980px; text-align: center; }
#wrapper { width: 980px; margin: 0 auto; text-align: left; }
Put a div with ID "wrapper" inside your body tag, and the wrapper will always be at the center of the screen, and will always by 980px;
在 body 标签中放置一个 ID 为“wrapper”的 div，包装器将始终位于屏幕的中心，并且始终为 980px；
回答by AbhiRoczz...
set the width on body tag and set CSS style align to center
设置 body 标签的宽度并将 CSS 样式设置为居中对齐
回答by Ian Pugsley
Create a container div for the portion of the page that you want to be 980px, and set it to width: 980px; margin: 0 autoso that it will be centered and 980px.
为您希望为 980 像素的页面部分创建一个容器 div，并将其设置width: 980px; margin: 0 auto为居中且为 980 像素。
