0

如果你的网页覆盖了整个屏幕，那么左右两边都有区域，里面什么都没有。如果您使页面变小，它们将变小，并且实际网页在您移动时保持居中，直到条形消失，此时它将停止移动。（本网站包含这些栏）我查找了如何制作侧栏，但我发现所有资源都包含不会消失的侧栏或导航栏。（我不想要导航栏）

4

3 回答 3

2

你的问题有点含糊，但在大多数情况下，你有一个两列固定宽度的布局，它被包裹在一个容器中。该容器通常以固定宽度居中在页面上。

<div id="container">
  <div id="left-column">Left Column</div>
  <div id="right-column">Right Column</div>
</div>

在这种情况下，容器 div 上的 margin:0 auto 是 div 的中心。您可以使用 min-width 来确保容器 div 不会低于特定大小，如果您使用基于百分比的布局，这将是一件好事。CSS 看起来像这样：（请注意，我已经给它高度和颜色以使其清晰）。

#container {
  margin:0 auto;
  width:300px;
  min-width:300px;    
}

#left-column {
  float:left;
  background-color:green;  
  width:230px;
  height:200px;    
}

#right-column {
  float:right;
  background-color: red;
  width:70px;
  height:200px;    
}

这是演示。

于 2012-09-26T20:57:55.617 回答
1

达斯汀迪亚兹曾经对这个问题有一个非常巧妙的答案 - 但他的网站似乎已关闭（http://www.dustindiaz.com/centering-a-webpage/）

无论如何，你可以通过在你的身体上添加这个 css 来使网页居中而不需要任何额外的标记：

body { 
    margin:0 auto;
    width:760px;
    /* adjust width as needed */
}

所有功劳归功于达斯汀。

于 2012-09-26T20:43:22.437 回答
0

当您找到一个可以满足您需求的网站时，您可以使用浏览器附带的工具了解它的工作原理。例如，在 IE 和 Chrome 上，按 F12 将显示所有内容 - HTML、javascript、CSS 等等。

如果您无法理解某个特定的效果，请返回一个 URL，我们将帮助您了解详细信息。

于 2012-09-26T20:46:12.907 回答