html - Div 位于中心，具有特定宽度，两侧必须随屏幕缩放

Question

我正在尝试让 3 个 div 彼此分开，两侧的 div 需要平均填充页面的其余部分:

    <div class="second_bar">
        <div class="status_border_left">
        </div><div class="nav_bar">
        </div><div class="status_border_right">
        </div>
    </div>

我的 CSS:

.status_border_left{
    //width:100px;
    height:14px;
    background-color:yellow;
}
.status_border_right{
    //width:100px;
    height:14px;
    background-color:yellow;
}
.nav_bar{
    position:relative;
    margin: 0 auto;
    height:80px;
    width:980px;
    background-color:green;
}
.second_bar *{
    display:inline-block;
    vertical-align:top;
}
.second_bar{
    height:80px;
    width:100%;
}

有什么方法可以在不涉及 JavaScript 的情况下做我想做的事吗？

Answer 1

这是一种使用 CSS 显示类型 table 和 table-cell 的方法。

你需要对你的左右子元素做一个小的修改，简单地定义一个包装器 .content div 来封装任何内容。

HTML:

<div class="second_bar">
    <div class="status_border left">
        <div class="content"></div>
    </div>

    <div class="nav_bar"></div>

    <div class="status_border right">
        <div class="content"></div>
    </div>
</div>

和 CSS:

.second_bar {
    height:80px;
    width:100%;
    border: 1px dotted blue;
    display: table;
}
.status_border {
    display: table-cell;
    vertical-align: top;
    width: auto;
    background-color: yellow;
}
.status_border .content {
    width: auto;
    height: 14px;
    background-color: pink;
}
.nav_bar {
    display: table-cell;
    vertical-align: top;
    height: 80px;
    width: 980px;
    min-width: 980px;
    background-color: green;
}

对于您的容器 block .second_bar，将显示类型设置为 table 并将宽度设置为 100%。

子元素.status_border 和.nav_bar 有display: table-cell 和vertical-align: top，但您可以根据您的布局要求进行调整。

.nav_bar 子 div 的宽度为 980px，但由于它是一个表格单元格，如果窗口足够小，宽度可能会缩小到 980px 以下。如果需要，表格单元格将缩小以适合内容。要保持全宽，请将 min-width 设置为宽度。

要使左右状态指示条的高度为 14px，您需要有一个单独的 block 元素，其中包含左右子元素。

默认情况下，三个 table-cell block 将采用三个表格单元格中最高的高度，在本例中为 80px .nav_bar div。

如果您将 .content 的宽度设置为自动，它将采用相同的宽度并填满剩余的可用页面宽度。

请注意，IE8 不支持 table-cell，但除此之外，这是一个非常有用的模式。

参见演示 fiddle :http://jsfiddle.net/audetwebdesign/SyAAQ/