html - 坚持使用标题的 CSS 宽度/ float

Question

对于我正在做的家庭元素，我有点受困于 CSS。目前我正在处理标题或“顶部菜单栏”。在视口(viewport)的每一侧都有一个或两个具有固定 px 尺寸的按钮。这些 L 和 R 侧 div 都设置为 float L 和 R，并设置为 display:block;。

现在我想要得到的是“header-center”-div 将漂浮在这些 L 和 R div 之间的中心的同一条线上。其中的所有内容也应该居中。我要做的最后一件事是最大值。中心 div 的宽度可能(动态地)不大于视口(viewport)宽度的剩余部分减去用于 L 和 R div 的宽度(因此所有内容都保持在相同的高度)。

我怎样才能得到我想要的结果？？

<header>
 <div id="header-left"></div>
 <div id="header-center"></div>
 <div id="header-right"></div>
</header>

#header-left {
 width: 160px;
 height: 80px;
 display: block;
 float: left;
}

#header-center {
 height: 80px;
 display: block;
 overflow: hidden;
}

#header-right {
 width: 240px;
 height: 80px;
 display: block;
 float: right;
}

Answer 1

也许这可以解决你的问题

header{
  display: table;
  width: 100%;
}

#header-left { 
  width: 160px;
  height: 80px;
  display: table-cell;
  background: #f00;
}

#header-center {
  height: 80px;
  overflow: hidden;
  display: table-cell;
  background: #0f0;
}

#header-right {
  width: 240px;
  height: 80px;
  display: table-cell;
  background: #00f;
}

<header>
 <div id="header-left">Left</div>
 <div id="header-center">Center</div>
 <div id="header-right">Right</div>
</header>