Question

我试图保持主div始终居中但是当将浏览器窗口调整为从900px开始的最小尺寸时，如何让“主”留下全部留下，只有在更大的屏幕或900px以上他开始居中中间的页面？

提前致谢

CSS：

body {
   font: 24px Helvetica;
   background: #999999;
   min-width: 900px;
   margin: 0;
  }

#main {
    margin-left: auto;
    margin-right: auto;
    clear: both;
}


header {
    width: 100%;
    background: yellow;
    text-align: center;
}

nav {
    width: 20%;
    min-width: 120px;
    max-width: 300px;
    float: left;
    height: 600px;
    background: orange;
    text-align: center;
}

article {
    width: 80%;
    min-width: 400px;
    max-width: 1200px;
    float: left;
    height: 600px;
    background: yellow;
    text-align: center;
}

footer {
    width: 100%;
    float: left;
    height: 100px;
    background: blue;
    text-align: center;
}

HTML：

 <header>header</header>
 <div id='main'>

     <nav>nav</nav>
     <article>article</article>

 </div>
 <footer>footer</footer>

Answer 1

您可以使用以下媒体查询：

#main {
    clear: both;
}

@media screen and (min-width: 900px) {
    #main {
        margin:auto;
        width: 900px; // will need some sort of width adding either here or above for a default width
    }
}

Example

Answer 2

抱歉，您的问题中的语言开始变得有些混乱。所以我清楚的是，你想要一些CSS应用于某个屏幕宽度以下，而其他CSS应用于某个屏幕宽度以上。这可以使用媒体查询来实现。请参阅以下内容：

以下CSS适用于宽度最大为900px的屏幕。

@media only screen and (max-width: 900px) {
  #main {
    margin-left: 0;
    margin-right auto;
    clear: both;
  }
}

以下CSS适用于宽度超过900像素的屏幕。

@media only screen and (min-width: 900px) {
  #main {
    margin-left: auto;
    margin-right: auto;
    clear: both;
  }
}

您可以在此处详细了解媒体查询： http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

希望这有帮助。

中心页面，例外

2 个答案: