0

许多网站使用页面最小宽度的技术，如果浏览器比这更宽，那么内容就会居中。一个完美的例子，如果这个 Facebook，如果你打开http://www.facebook.com并将浏览器窗口拖到它的最小宽度，然后慢慢地把它拖出来，直到窗口与屏幕允许的一样宽。您会注意到页面的内容保持相同的大小，但在有空间时保持居中。这是如何实现的？

4

4 回答 4

2

您也可以只设置一个宽度甚至一个最大宽度： 

#maincontainer {
width:90%; /* to show it can have width + max-width */
max-width:1020px;
margin:auto;
}
于 2013-06-10T19:08:06.017 回答
1

这让我想起了网格系统。

无论如何，希望我在这里得到您的要求..从我的观点来看，基本上您需要做的只是定义内容width并将margin（左和右）设置为“自动”。这是我在设计网页时经常做的事情。

CSS

.pgheader, .pgbody, .pgfooter {
    margin: 0;
    padding: 20px;
}
.pageWrapper {
    margin: 0 auto;
    width: 960px; /* this if you go with fixed sized */

    /*** if you want to go with dynamic width (either min- or max-width),
         you can go with the following

    width: 90%;
    min-width: 960px;

    ***/
}

HTML

<body>
    <div class="pgheader">
        <div class="pageWrapper">
            ... content goes here ...
        </div>
    </div>
    <div class="pgbody">
        <div class="pageWrapper">
            ... content goes here ...
        </div>
    </div>
    <div class="pgfooter">
        <div class="pageWrapper">
            ... content goes here ...
        </div>
    </div>
</body>
于 2013-06-12T07:17:31.373 回答
0

由于我在这里没有找到我要找的东西，所以我玩了一些 css 属性，最终得到了我想要的东西。它基本上将两个包装器组合在一起以保持水平居中，同时在两侧保持边距，并在主体本身上保持最小间距。我整理了一个 jsFiddle 来展示它是如何工作的。

http://jsfiddle.net/eDWKw/

<body>
    <div class="margin-wrapper">
       <div class="centered-wrapper">
            content
       </div>
    <div>
</body>


body{
    min-width:400px;
}
.margin-wrapper{
    margin-right:80px;
    margin-left:80px;
}
.centered-wrapper{
    width:300px;
    margin:0 auto;
}
于 2013-06-10T21:27:19.823 回答
0

使用 CSS 媒体查询。阅读http://css-tricks.com/css-media-queries/，这是一个很好的介绍。

于 2013-06-10T18:13:45.053 回答