【问题标题】：css inline block with fixed width固定宽度的css内联块
【发布时间】：2014-06-17 09:07:25
【问题描述】：

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

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

这是我的 html/css 代码：

JSFiddle

【问题讨论】：

对于问题 1，是的。您已经有一个包装类，请尝试在那里设置宽度。不要忘记，您可以通过将左右边距设置为 auto 来居中应用了宽度的块级内容（如 div）。对于问题 2，css 属性 float 是您所需要的。

标签： html css

【解决方案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/

【讨论】：

感谢您的回复！我只是有一些小问题，当我展开结果框时，页脚背景灰色随框展开，我该如何解决？没有浮动可以做到吗？
@Andrew，您可以将body 设为max-width:1000px 而不是.wrapper。这样它也会影响.footer。对于float:left，您可以使用display:inline-block 但是，您必须确保两个div 元素之间没有空格。 jsfiddle.net/Sp2ZW/2的演示
这正是我想要的，谢谢！我记得在某处读到链接中断或
将花费一个空格...尽管我不确定
是的，源代码中的换行符是空白（因为您将两个 div 设置为 display:inline-block，它们之间的空白被渲染为任何其他空白..

【解决方案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;
}

【讨论】：

【解决方案3】：

Fiddle

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

Foundation bootstrap

回答您的问题。

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

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

如果屏幕分辨率小于 480 像素，内容将占据 100% 宽度并水平堆叠，因为上面的查询。在设计响应式网页时使用 % 宽度可以帮助您

【讨论】：

Sorry Gaby 先搞定了.... 我曾考虑过使用我在使用 html5up 之前做过的框架，但我完全不知道从哪里开始重新设计。所以，我最终开始我自己的想法...
@Andrew 如果您正在构建响应式网页，请使用媒体查询