Question

我正在尝试使我的网站更具可扩展性，并希望我的所有div都占据整个页面的宽度。如果没有，我希望他们都集中在960px。问题是当我尝试margin-left时，没有一个div实际上居中：auto，margin-right：auto;。当我尝试将宽度设为100％，然后尝试调整窗口大小时，一切都变得古怪。

这是网站： http://eitanrosenberg.com/newsite/index.html

这是我的CSS：

*
{
    margin:0;
    padding:0;
}

.everythang
{
    margin-left:auto;
    margin-right:auto;
}

.topbar
{
    background-color:#000;
    height:75px;
    margin-left:auto;
    margin-right:auto;
    position:fixed;
    width:100%;
    z-index:10;
}

.logo
{
    color:#FFF;
    float:left;
    font-family:HarabaraRegular,helvetica;
    font-size:45px;
    margin:15px auto 0 20px;
    padding-left:100px;
    position:relative;
    width:160px;
}

.navbar ul
{
    color:#FFF;
    display:inline;
    float:right;
    list-style-type:none;
    margin-right:25px;
    margin-top:15px;
    text-decoration:none;
}

.navbar ul li
{
    display:block;
    float:left;
    margin:15px auto 0 5px;
    padding-right:32px;
}

.navbar ul li a
{
    color:#FFF;
    font-family:HitchcockRegular, helvetica;
    font-size:25px;
    text-decoration:none;
}

.navbar ul li a:hover
{
    color:#0CF;
}

.white
{
    background-color:#F8F8F8;
    background-image:url(gradients/radialg_200.png);
    background-position:30% 0;
    background-repeat:no-repeat;
    height:300px;
    margin:0;
    padding:50px 0 0;
    width:960px;
}

.hello
{
    color:red;
    font-family:CoolveticaRegular, helvetica;
    font-size:50px;
    margin-left:auto;
    margin-right:auto;
    padding-top:50px;
    text-align:center;
}

.hello2
{
    color:red;
    font-family:CoolveticaRegular, helvetica;
    font-size:35px;
    margin-left:auto;
    margin-right:auto;
    padding-top:10px;
    text-align:center;
}

.hello3
{
    color:#0CF;
    font-family:CoolveticaRegular, helvetica;
    font-size:35px;
    margin-left:auto;
    margin-right:auto;
    padding-top:10px;
    text-align:center;
}

.orange
{
    background-color:#F93;
    background-image:url(gradients/radialg_400.png);
    background-position:30% 0;
    background-repeat:no-repeat;
    height:500px;
    margin:0;
    padding:50px 0 0;
    width:960px;
}

.workbar ul
{
    color:#FFF;
    float:left;
    line-height:25px;
    list-style-type:none;
    margin-left:100px;
    margin-right:25px;
    margin-top:100px;
    text-decoration:none;
}

.workbar ul li
{
    margin:2px auto 0 35px;
    padding-right:32px;
}

.workbar ul li a
{
    color:#FFF;
    font-family:helvetica;
    font-size:25px;
    font-style:bold;
    text-decoration:none;
}

.workbar ul li a:hover
{
    color:red;
}

.red
{
    background-color:red;
    background-image:url(gradients/radialg_400.png);
    background-position:30% 0;
    background-repeat:no-repeat;
    height:500px;
    margin:0;
    padding:50px 0 0;
    position:static;
    width:960px;
}

.red h2
{
    color:#FFF;
    font-family:Helvetica;
    font-size:45px;
    margin-left:100px;
    padding-top:40px;
}

.red ul
{
    color:#FFF;
    float:left;
    list-style-type:none;
    margin-left:100px;
    margin-right:25px;
    margin-top:15px;
    text-decoration:none;
}

.red ul li a
{
    color:#FFF;
    font-family:helvetica;
    font-size:20px;
    font-style:bold;
    text-decoration:none;
}

.faves img
{
    display:inline;
    float:left;
    height:50px;
    padding-top:15px;
    position:relative;
    width:50px;
}

.faves
{
    padding-top:25px;
}

.faves h2
{
    display:inline;
    float:left;
    margin-top:25px;
    padding-top:15px;
}

.lists
{
    margin-top:100px;
}

.list1
{
    float:left;
    width:320px;
}

.list2
{
    float:left;
    width:320px;
}

.list3
{
    width:320px;
}

.gray
{
    background-color:#2e3031;
    background-image:url(gradients/radialg_400.png);
    background-position:30% 0;
    background-repeat:no-repeat;
    height:700px;
    margin:0;
    padding:50px 0 0;
    position:static;
    width:960px;
}

.gray h2
{
    color:#FFF;
    font-family:Helvetica;
    font-size:45px;
    margin-left:100px;
    padding-top:40px;
}

.resumeImg img
{
    display:block;
    height:550px;
    margin-left:auto;
    margin-right:auto;
    width:900px;
}

Answer 1

使用margin使元素居中，需要元素具有布局。使用margin-left和margin-right时，这将是width属性。

使元素居中的另一种方法是：

position: absolute;
width: 800px;
left: 50%;
margin-left: -400px;

您可以将元素从左侧移动50％，然后移回400px（宽度的一半）。这也适用于高度。

Answer 2

让你的包装divs（'白'，'橙'等）设置为width: 100%;并将你的内容放在里面（最好放在另一个div中，设置为{{1 }}：

width: 960px; margin: 0 auto;

并使用以下HTML：

.white, .orange {
  width: 100%;
} 

.white-wrapper {
  width: 960px;
  margin: 0 auto;
}

通过这种方式，您的背景将适当地填充页面，并且您的内容将浮动在中心并在缩小页面时正常工作。我建议您不要动态更改内容的宽度，因为它会显示可读性问题（并且看起来很粗糙），但如果您真的想要，请尝试<div class="white"> <div class="white-wrapper"> -- content -- </div> </div>：

min-width

这将确保您的div始终至少 .white { min-width: 960px; }宽;

Answer 3

如果我正确理解您的问题，您需要一个960px宽的固定居中布局，除非浏览器窗口小于960px，否则您希望布局为全宽。

为此，请将整个html代码包装在容器中，如下所示：

<body>
  <div id="container">
    <!-- your code here -->
  </div>
</body>

并应用此css：

#container {margin:0 auto;max-width:960px;}

Internet Explorer 6不了解max-width，所以如果这是一个问题，你可以给IE6一个960px的固定宽度：

#container {margin:0 auto;max-width:960px;}
* html #container {width:960px;} /* IE6 hack */

或在IE6中使用更加丑陋的黑客强制max-width：

* html #container {width: expression(document.body.clientWidth > 962? "960px");

有没有办法在CSS中获得100％的固定宽度？

3 个答案: