Question

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

| left sidebar |       content        | right sidebar |

每列都是一个div，其中 float：left 。

我希望内容div始终居中，但也要设置 max-width ：

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

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

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

|        left sidebar        |       content        |        right sidebar        |

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

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

Answer 1

使用 flexbox 非常简单

df.transpose()

*{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; }

Answer 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潜伏着。这也有点难学，但更灵活。

Answer 3

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

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

媒体查询示例：

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

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

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

代码段：

以下是完整的代码段，包括html和css：

＆＃13;

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;
    }
}

＆＃13;

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

＆＃13;

以最大宽度和内容为中心的div

3 个答案: