使网页适合屏幕分辨率

Question

我有一个包含以下内容的网页..

<div id="container">
  <div id="header"></div>
  <div id="lsidebar"> 
  </div>
  <div id="content">
  </div>
  <div id="rsidebar">
  </div>
</div>

我需要一个容器在屏幕上始终居中。

容器宽度将是屏幕的一半。我使用margin-left来集中容器。但是对于不同的浏览器它是不同的。

另一个问题：我正在添加浮动：左侧为lbar，内容，rbar。但是rbar正在移动到下一行，就像这样......

这是我的css

#container
{
        position:absolute;
    width:75%;
    left:15%;



}
#header{width:100%;height:430px;}
#content{position:relative;top:0px;width:60%;}
#rsidebar{border:2px solid black;width:100px;height:200px;float:left;}
#footer{position:relative;top:10px;width:100%;}

如何解决这个问题...

Answer 1

  

容器宽度将是屏幕的一半。我使用margin-left来集中容器。

对不起？

如果容器是屏幕的一半，那么您将拥有width:50%。如果您想将其居中，那么您将拥有margin:0 auto;。

只有两种适当的技术可以在页面上居中项目：内容为text-align:center;，块为margin:0 auto;。你可能想做margin-left:25%;width:50%;这样的事情，但它可能不会在所有浏览器中产生预期的结果并导致太多问题，所以尽量坚持每个人使用多年的技术，除非你能证明这一点你的技术要好得多。

  

另一个问题：我正在添加浮动：左侧为lbar，内容，rbar。但是rbar正在移动到下一行

可能三个面板的外部宽度大于容器的宽度。请注意，我们讨论的是外部宽度，而不是width本身。例如，如果容器元素是1067像素宽度并且包含两个200像素的面板和一个600像素的面板，其间具有50像素的边距，则三个面板的实际宽度将是200×2 + 600 = 1000，但是外部宽度将是1000 + 50×2 = 1100，即大于1067像素。

为了避免面板宽度出现问题，特别是在容器宽度可变的情况下，视窗口大小而定，可左浮动左侧面板，右侧浮动右侧面板并保持中央面板填补剩余空间。根据您的布局和设计，这可能并非总是可行。如果是这种情况，那么很高兴看到问题中的实际源代码能够提供更具体的答案。

---

查看源代码，我不明白为什么几乎每个元素都使用position:absolute和position:relative。有什么意义？

<强> 1。对齐容器

要对齐容器，您不仅要指定宽度，还要指定边距。

div#container{margin:0 auto;width:50%;}

<强> 2。浮动板块

现在你的容器已经填满了一半的空间并居中，让我们定位面板。

右侧面板的宽度为100像素。我想你的左面板宽度相同。

div#lbar,
div#rbar{width:100px;}

让我们浮动左右浮动它们：

div#lbar,
div#rbar{width:100px;float:left;} /* Apply this style to both side panels */
div#rbar{float:right;} /* Override the float:left of the preceding line */

现在，我们希望中央面板避免填充已由另外两个面板填充的空间：

div#content{margin:0 100px;}

这就是你需要做的所有事情。

---

我可能还建议您阅读一些有关HTML / CSS的书籍。看看你的代码，我可能会认为你对它不是很熟悉，而且有些阅读可能会提高你对语言和技能的理解。

Answer 2

首先：给容器一个宽度和

margin-left auto; margin-right:auto;

你使用meyerweb重置样式表吗？

Answer 3

lbar + content + rbar + margin + padding的组合宽度可能大于容器中的空间;因此你的rbar移动到底部。

也可以使用Daniel

的容器解决方案

Answer 4

您可以使用margin: auto水平居中容器。关于侧边栏您可能需要lbar，rbar，content在标记和float: left，float: right分别用于lbar和rbar。请记住将clear: both放在页脚上以防万一。

Answer 5

您还可以使用HTML5或类似http://lessframework.com的内容来指定不同屏幕尺寸的条件。