Question

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

它基本上是SIDEBAR |主页| 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媒体查询。

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

2 个答案: