居中的div，最大宽度和两侧内容

Question

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

| left sidebar |       content        | right sidebar |

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

我想让内容div始终居中，但还要为其设置一个最大宽度 ：

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

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

因此，在一个非常大的屏幕上，它看起来像这样：

|        left sidebar        |       content        |        right sidebar        |

好像内容div的边距是： 0自动 （但两个div在侧面而不是空白）。

CSS可以做这样的事情吗？

Answer 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>

Answer 2

自float: left以来，情况已经发生了变化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像table-cell一样工作， 而无需实际使用表 -兼具两个优点。

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

更好的解决方案是使用flex-box 。 但是，这仅在现代浏览器中有效，因此您可能必须推迟直到可以确定没有IE潜伏。 学习起来也比较困难，但是更加灵活。

Answer 3

如果由于某些较旧的浏览器不支持使用flex-box ，请不要使用它。

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

媒体查询示例：

@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 。

程式码片段：

这是完整的代码段，包括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>

居中的div，最大宽度和两侧内容

问题描述

3 个解决方案

解决方案1
1 2017-04-04 12:45:04

解决方案2
0 2017-04-04 12:50:16

解决方案3
0 2017-04-04 14:44:58

居中的div，最大宽度和两侧内容

问题描述

3 个解决方案

解决方案1 1 2017-04-04 12:45:04

解决方案2 0 2017-04-04 12:50:16

解决方案3 0 2017-04-04 14:44:58

解决方案1
1 2017-04-04 12:45:04

解决方案2
0 2017-04-04 12:50:16

解决方案3
0 2017-04-04 14:44:58