Question

我有典型的3列布局，我需要它是流动的（ish）。项目的规格是：我们需要容器从最大1024px到1440px（这很容易）。中间列需要从514（在1024）到626（在1440），两侧的侧边栏包含剩余的空间。

我没有看到一个简单的方法，我玩过最大宽度和最小宽度，但由于比例在2个断点处不一样，我无法使用百分比宽度使列填充更高分辨率的空间。

这是我的代码：

<div id="container">
    <nav id="sidebar-left">Left</nav>
    <section id="page">Center</section>
    <div id="sidebar-right">Right</div>
</div>


#container{
    min-width:1024px;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    min-height: 100%;
}

#sidebar-left{
    min-width: 230px;
    max-width: 387px;
    float: left;
    background: red;
    height: 300px;
}
#sidebar-right{
    min-width: 230px;
    max-width: 387px;
    float: right;
    background: blue;
    height: 300px;
}
#page{
    min-width: 514px;
    margin: 0 20px;
    max-width: 626px;
    float: left;
    background: purple;
    height: 300px;
}

我也做了一个小提琴：

https://jsfiddle.net/1y59nuxz/

我宁愿只使用css解决方案，我非常确定使用jquery或多或少都很容易解决，但我想知道使用它是否平易近人。

编辑：我需要这个与IE9 +

兼容

Answer 1

确定。您有几种解决方案可以完成此任务。

一种解决方案是改变html中元素的顺序（如果可能）：

<div id="container">
    <nav id="sidebar-left">Left</nav>
    <div id="sidebar-right">Right</div>
    <section id="page">
        <div class="page-inner">Center</div
    </section>
</div>

对于＆＃34;＃page＆＃34;使用下一个css代码：

#page{
    overflow: hidden;
    height: 300px;
}

.page-inner {
    height: 100%;
    margin: 0 20px;
    background: purple;
}

FIDDLE

另一种解决方案是应用flexbox。它更优雅，更轻松。

Answer 2

我认为可以使用table＆amp; table-cell css如此：

基本上将.container设置为display: table
然后将.container的所有直接子项设置为display: table-cell
现在这些孩子会相应地缩减/增长到他们的父母，但是必须进行一些调整以使#page保持在626px widh并相应缩小
max-width/min-width组合不适用于#page div，但我们可以根据所需的最大宽度指定固定宽度，在本例中为626px，这样就可以了div不会超过626px宽度，但如果调整窗口大小，则会缩小
最后，因为我们在这些子div上使用display: table-cell，所以任何边缘支柱。将被忽略，但我们可以使用一些border-left＆amp; amp;正确的道具。或者在#page div中添加另一个div，该div将保存内容并相应地应用了一些余量和背景。

查看下面的演示：

虚假保证金到#page here
或另一个包含#page here

Answer 3

我已在fiddle

修改了您的代码

或者检查下面的代码。

HTML

<div class="content">
    <div class="content__left">left</div>
    <div class="content__right">Right</div>
    <div class="content__middle">Center</div>
</div>

CSS

html, body, .container {
    width: 100%;
    height:100%;
    min-width:1024px;
    max-width: 1440px;
}
.content__left {
    width: 20%;
    max-width:200px;
    float: left;
    background: red;
    margin-right:20px;
    height:300px;
}
.content__middle {
    min-width: 514px;
    background: purple;
    overflow: auto;
    height:300px;
}
.content__right {
    width: 20%;
    max-width:200px;
    float: right;
    background: blue;
    margin-left:20px;
    height:300px;
}

使div宽度达到最大宽度

3 个答案: