Fiddle

Question

我正在努力学习设计网站。

有什么方法可以用我当前的响应粘性页脚将整个页面宽度设置为1000px吗？
如果可能的话，除了上面提到的条件之外，我希望左边和右边的div水平对齐，当屏幕折叠时div会变成垂直对齐。

这是我的html / css代码：

JSFiddle

Answer 1

将max-width:1000px;添加到.wrapper课程并制作.content课程float:left

.wrapper {
    margin: 0;
    height: auto; 
    max-width:1000px; /*add this line*/
}

.content {
    background-color: slateblue;
    width: 500px;
    float:left; /*add this line*/
}

演示 http://jsfiddle.net/Sp2ZW/

Answer 2

你的意思是这样的？：

http://jsfiddle.net/S3hMH/1/

html, body {
    margin: 0 auto;
    display: table;
    height: 100%;
    width: 100%;
    width: 1000px;
}

.content {
    background-color: slateblue;
    width: 500px;
display: inline-block;
    float:left;
}

Answer 3

Fiddle

如果您对响应式设计比较陌生，我建议使用框架

Foundation bootstrap

回答你的问题。

Ya您可以将页面宽度设置为1000px。
```
#wrapper{
margin: 0 auto;
    width: 100%;
    max-width: 1000px;
}

.content{
width: 50%;
float:left;
} 
```
@media screen and (max-width: 480px) { .content{ width:100%; } }

由于上面的查询，如果屏幕分辨率小于480px，内容将占据100％宽度并水平堆叠。使用％width可帮助您设计响应式网页

具有固定宽度的css内联块

JSFiddle

3 个答案:

Fiddle