响应式设计:中间页面缩小，而边栏保持不变

Question

我构建了一个页面，其中有3个div都是内联的。

它基本上是SIDEBAR|Main Page|SIDEBAR

现在我把所有这些都封装在一个div中，我已经设置好了，所以它是响应的。目前，当我缩小页面宽度时，它会将左侧边栏放在顶部，将主页放在中间，将右侧边栏放在它们下面。我希望所有内容都保持一致，只需将主页缩小到一定的量，然后停止（并停止响应）。我该如何做到这一点？

JSFiddle：https://jsfiddle.net/mnyd4tx8/

代码：HTML

    </div>
    <div class="middlepage">
    </div>
    <div class="sidebar">
    </div>
</div>

CSS

  .pagewrap {
        width:80%;
        max-width: 600px;
        min-width:200px;
        height:1200px;
        border:1px solid green;
        margin:0 auto;
        text-align: center;
    }
    .middlepage {
        background-color: red;
        width:80%;
        max-width:200px;
        min-width:100px;
        height:1000px;
        padding:10px;
        text-align:center;
        margin:0 auto;
        display:inline-block;
        vertical-align: top;
    }
    .sidebar {
        display:inline-block;
        width:100px;
        height:100%;
        background-color:black;
    }

Answer 1

您可以使用获得所需的结果

.pagewrap {
    width:80%;
    max-width: 600px;
    min-width:400px;
    height:1200px;
    border:1px solid green;
    margin:0 auto;
    text-align: center;
}
.middlepage {
    background-color: red;
    width:60%;
    max-width:200px;
    min-width:100px;
    height:1000px;
    padding:10px;
    text-align:center;
    margin:0 auto;
    display:inline-block;
    vertical-align: top;
}
.sidebar {
    display:inline-block;
    width:20%;
    max-width:100px;
    height:100%;
    background-color:black;
}

请注意，.sidebar上的宽度现在使用百分比和最大宽度。此外，我减小了.middlepage的宽度百分比，因此.pagewrap中包含的所有内容加起来就是100%。

现在，无可否认，这不是一个100%响应的解决方案，但你的问题让我相信你的内容有一些宽度限制。

Answer 2

更新的JSFiddle：https://jsfiddle.net/mnyd4tx8/1/

.pagewrap {
    width:80%;
    height:1200px;
    border:1px solid green;
    margin:0 auto;
    text-align: center;
}
.middlepage {
    background-color: red;
    width:50%;
    height:1000px;
    padding:10px;
    text-align:center;
    margin:0 auto;
    display:inline-block;
    vertical-align: top;
}
.sidebar {
    display:inline-block;
    width:100px;
    height:100%;
    background-color:black;
}

它会一直工作到某个点，超过这个点就会像往常一样坏掉。在这种情况下，您需要处理CSS媒体查询。