Html 以特定宽度居中分割，侧面必须与屏幕成比例

我正试着让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>

有没有什么方法可以在不涉及JavaScript的情况下实现我想要的功能？

您需要float

div1{
float:left;
}

div2{
float:left
}

---

下面是一种使用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>

对于您的容器块

.second_bar

，将显示类型设置为

table

，将宽度设置为100%

子元素

.status\u border

和

.nav\u bar

具有

显示：表格单元格

和

垂直对齐：顶部

，但您可以根据布局要求进行调整

.nav_bar

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

min width

设置为宽度

要使左侧和右侧的状态指示条达到14px高，需要有一个单独的块元素和左侧和右侧的子元素

默认情况下，三个

表格单元格

块将采用三个表格单元格中最高的高度，在本例中为80px

.nav_条

div

如果将

.content

的宽度设置为“自动”，则两者的宽度将相同，并填满剩余的可用页面宽度

请注意，IE8不支持

表格单元格

，但除此之外，这是一种非常有用的模式

---

请参见演示小提琴：

您可以尝试css3 flexbox模块。像这样：

HTML

---

请查看。

是否有

.status\u栏

块元素？您的HTML可能缺少它。。。请查收。谢谢。编辑了它，很抱歉它是未更新的。浮动将导致这些分区缩小以适应其内容，因此他们如何知道填充包含块的剩余宽度？请指定这两个分区中的宽度，因为没有宽度，高度不起作用。这是我尝试的，我只注释了宽度，所以你们不会说：“问题是100像素的宽度！“你的答案很有效，但马克·奥德特的答案也有解释。+1让我发现了Flex。。。

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

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

<div class="second_bar">
  <div class="status_border_left">left</div>
  <div class="nav_bar">nav bar</div>
  <div class="status_border_right">right</div>
</div>

html,body{
  margin: 0;
  padding: 0;
  height: 100%;
}
.second_bar {
  width: 100%;
  min-height: 100%;
  color: #fff;

  display: -moz-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.status_border_left,
.status_border_right {
  width: 20%;
  background: green;
}
.nav_bar {
  -moz-flex-box: 1;
  -webkit-flex-box: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  background: orange;
}