div 中的 max-width 使响应式设计不起作用答案

【问题标题】：max-width in div to make responsive design not workingdiv 中的 max-width 使响应式设计不起作用
【发布时间】：2013-04-11 11:31:33
【问题描述】：

我的 div 出现问题，无法使用 RWD 创建页面。我需要我的 div 具有 max-width: 800px 所以当调整浏览器大小时，div 也会调整大小并且最大为 800px，但不起作用。

HTML

<div id="container>
    <div class="show-section">
        <h3>Section 1</h3>
    </div>
    <div class="show-section">
        <h3>Section 1</h3>
    </div>
    <div class="show-section">
        <h3>Section 1</h3>
    </div>
</div>

CSS

body {
    background-color: #fffff7;
    font: 16px/22px Helvetica, Arial, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}
#container {
    display: block;
    margin: 0 auto;
    margin-top: 50px;
    max-width: 800px;
}

最大宽度：800px

宽度：70%

当它达到大约 720 时。没有调整大小，也不是应该在屏幕上居中，而是如果不是 max-width: 800px;会放 width: 70% 的作品。但我不希望这样，因为当屏幕太大时，div 也是如此，所以我希望有一个大小限制。

【问题讨论】：

为什么不指定媒体查询？ developer.mozilla.org/en-US/docs/CSS/Media_queries
是的，我放了一个媒体查询，但用于其他组件.. 但在其他项目中，我有类似的 css 并且在没有媒体查询的情况下完美运行
我很难理解您的问题，但您是否尝试过width:70%;max-width:800px;？

标签： css html responsive-design

【解决方案1】：

似乎对我有用，我只需要在“容器”ID 后添加一个小双引号。

<div id="container>

到

<div id="container">

小提琴：http://jsfiddle.net/mUCSz/1/。只需调整预览窗格的大小即可。

【讨论】：

@SoldierCorp 也可以将margin 修改为margin:50px auto 0;
很少见：/ 在 jsfiddle 中工作正常.. 可能会影响其他属性.. 尊重“容器，只需忘记关闭引号。