Question

我正在尝试创建类似yahoo.com的内容，其中内容位于中间，而在郊区则有灰色边距（或者至少看起来像边缘，不确定它是否填充）。我是成功的，但是当用户调整页面大小时，我希望这个边距减少就像在yahoo.com上一样，但它没有减少（去www.yahoo.com并调整页面大小并且他们的保证金减少）。任何人都知道如何降低这个保证金？

 body 
{ 
    font-family: "Lucida Grande", "Lucida Sans";
    background-color: #525252;
    text-align: center;
    margin-left: 150px;
    margin-right: 150px;
    margin-top: 0px;
    margin-bottom: 0px;
    min-width: 650px;
    min-height: 685px;
    color: #00008B;    
}

table
{
    margin:0;
    padding: 0px 2px;
    border-spacing: 0; /* remove the spacing between the borders. */
    width: 950px;
    height: 685px;
    background-color: #C1CDC1;
}

Answer 1

诀窍是在内容的body标签中创建一个固定宽度的容器div，并将边距设置为auto。

body { 
 text-align: center; 
}
div#container { 
 width: 960px; 
 text-align: left; 
 margin: 0 auto 
}

我是否也可以推荐使用firebug或类似的东西来检查网站的css和html等有用的工具？

Answer 2

将您的体型更改为：

 body { 
    font-family: "Lucida Grande", "Lucida Sans";
    background-color: #525252;
    text-align: center;
    margin: 0px auto 0px auto;
    width: 650px;
    min-height: 685px;
    color: #00008B;    
}

随着窗口尺寸减小，边距减小

2 个答案: