html - 固定宽度的三个div的布局

Question

我需要放置三个 div。中心的中间 div 具有固定宽度。另外两个应该平分剩余的空间。

我的 html:

<div class="menu-header" role="banner">
    <div>header left</div>
    <div class="container">header middle</div>
    <div>header right</div>
</div>

还有我的CSS:

.menu-header{
    display: table;
    width: 100%;
}
.menu-header{
    display: table-cell;
}

使用这段代码，左右div的宽度不同，这正在使中心 div 向左或向右倾斜。

Answer 1

两个样式 block 都使用相同的类

尝试- .menu-header div{
显示:表格单元格；
}

检查 fiddle - https://jsfiddle.net/afelixj/zq7g6pLo/