html - 响应式设计 : Middle page shrinks while sidebars stays the same

Question

我构建了一个页面，其中有 3 个 div，它们全部内联排列。

它基本上是 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% 响应的解决方案，但您的问题让我相信您的内容有一些宽度限制。