两侧具有最大宽度和内容的居中 div答案

【问题标题】：Centered div with max-width and content to both sides两侧具有最大宽度和内容的居中 div
【发布时间】：2017-04-04 12:40:46
【问题描述】：

假设我有一个包含 3 列的布局：

| left sidebar |       content        | right sidebar |

每一列都是一个带有float: left的div。

我想让内容 div 始终居中，但也要为其设置 max-width：

| left sidebar | centered + max width | right sidebar |

3 列的总宽度应始终为 100%，因此两个侧边栏将适应并填充剩余空间。

所以在一个非常大的屏幕上它看起来像这样：

|        left sidebar        |       content        |        right sidebar        |

好像内容 div 有边距：0 auto（但两个 div 在两侧而不是空白处）。

有没有可能用 CSS 做这样的事情？

【问题讨论】：

标签： html css width

【解决方案1】：

使用 flexbox 非常简单

*{margin:0; box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}
div{ border: 1px solid #000;}

/* here you go */
.flex{ display: flex; }
.grow-1{ flex: 1; }

<div class="flex">
  <div>left sidebar</div>
  <div class="grow-1">content</div>
  <div>right sidebar</div>
</div>

将grow-1 类添加到其他元素：

*{margin:0; box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}
div{ border: 1px solid #000;}

/* here you go */
.flex{ display: flex; }
.grow-1{ flex: 1; }

<div class="flex">
  <div class="grow-1">left sidebar</div>
  <div class="grow-1">content</div>
  <div class="grow-1">right sidebar</div>
</div>

【讨论】：

【解决方案2】：

自从float: left 是唯一的解决方案后，情况发生了变化。

更简单的替代方法是使用display 属性。一个例子是这样的：

div#wrapper {
    display: table;
    width: 100%;
    table-layout: fixed;
}
div#left-sidebar,
div#content,
div#right-sidebar {
    display: table-cell;
}

table-cell 属性允许 div 表现得像表格中的单元格而无需实际使用表格——两全其美。

wrapper div 中的属性允许您指定宽度并影响单元格的分布方式。

更好的解决方案是使用flex-box。然而，这只适用于现代浏览器，所以你可能不得不推迟，直到你可以确定没有 IE 潜伏。它也有点难学，但更灵活。

【讨论】：

【解决方案3】：

如果您想避免使用flex-box，因为某些旧版浏览器不支持它...

您可以在css 中使用display 表属性。然后可以使用@media 查询来有效地设置max-width 的content div （即中间列）。

媒体查询示例：

@media (min-width: 300px) {
    .middle {
        width: 100px !important;
    }
}

关于媒体查询的注意事项：.middle 类的width 值应等于@media 查询min-width 值除以三。然后，此上下文中的 width 值的行为类似于 max-width。

例如；如果您希望中间列的max-width 为300px，则将@media 查询的min-width 值设置为900px。鉴于此配置，中间列的宽度将保持灵活，直到浏览器宽度超过900px 宽度，此时中间列宽度固定为300px 宽度。

代码 sn-p：

这里是完整的sn-p代码，包括html和css：

body, html {
    padding: 0;
    margin: 0;
}

.wrapper {
    width: 100%;
    height: 100px;
    display: table;
    background: #BADA55;
    table-layout: fixed;
}

.wrapper > div {
    display: table-cell;
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

.middle {
    background: #C0FFEE;
}

@media (min-width: 750px) {
    /*
     * The 'width' value below should be the @media 
     * queries 'min-width' value (above) divided by three.
     *
     * The 'width' value below is then behaves similar
     * to 'max-width'.
     */
    .middle {
        width: 250px !important;
    }
}

<body>
    <div class="wrapper">
        <div>left sidebar</div>
        <div class="middle">content</div>
        <div>right sidebar</div>
    </div>
 </body>

【讨论】：