Html 如何限制html站点的宽度?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5133847/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 06:58:58  来源:igfitidea点击:

How to limit width of html site?

html

提问by Rasto

How do I set the width of a web page to always be exactly 1000px ? For example, like Facebook or here on StackOverflow. The site just will not resize. If the browser window is smaller than 1000px, the scroll bar is needed. And the page should be centered in the browser.

如何将网页的宽度设置为始终恰好为 1000px ?例如,像 Facebook 或 StackOverflow 上的这里。该网站只是不会调整大小。如果浏览器窗口小于 1000px,则需要滚动条。并且页面应该在浏览器中居中。

I can always put content of the page inside <div></div>tags, but I have read that it will not work for all browsers. So what is the right way to do it ?

我总是可以将页面内容放在<div></div>标签中,但我已经读到它不适用于所有浏览器。那么正确的做法是什么?

回答by Pekka

Enclosing the content in a divthat has the CSS widthproperty set to 1000pxwill work across browsers.

将内容包含在div将 CSSwidth属性设置为 的 a1000px将跨浏览器工作。

CSS:

CSS:

div.content { width: 1000px }

HTML:

HTML:

<body>
  <div class="content">
  ...
  </div>
<body>

However, consider using 960 pixels instead of 1000. It is a reliable standard that works on most devices down to a 1024 pixel display width including space for scroll bars and such.

但是,请考虑使用 960 像素而不是 1000 像素。这是一个可靠的标准,适用于大多数设备,显示宽度低至 1024 像素,包括滚动条等空间。

回答by dazza_au

Directly set the body to display at that width:

直接设置 body 以该宽度显示:

body {
   width:1000px;
   margin:0 auto;
}

However, I usually use a wrap div as follows:

但是,我通常使用 wrap div 如下:

html

html

<body>
  <div class="wrap"></div>
<body>

css

css

div.wrap {
    width:1000px;
    margin:0 auto;
}