坚持 CSS width/float header

Question

我有点卡在 CSS 上，因为我正在做一个家庭项目。目前我正在研究 header 或 'top menu bar'。在视口的每一侧都有一个或两个具有固定 px 尺寸的按钮。这些L和R侧div的都设置为float L和R，分别设置为display:block;.

现在我想要得到的是 'header-center'-div 将漂浮在这些 L 和 R div 之间的同一条线上。其中的所有内容也应该居中。我要做的最后一件事是最大值。中心的宽度 div 可能（动态地）不大于视口宽度的剩余部分减去用于 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>

Answer 2

建议答案：

<!Doctype html>
    <style>
        body{
            margin:0;
            width:100%;
        }

        #header-left,
        #header-center,
        #header-right{
            float:left;
            text-align:center;
            padding-top:10px;
            padding-bottom:10px;
        }

        #header-left,
        #header-right{
            width:10%;
            background:rgb(255,0,0);
        }

        #header-center{
            width:80%;
            background:rgb(0,0,255);
        }
    </style>
    <body>
        <header>
            <div id="header-left">Content</div>
            <div id="header-center">Content</div>
            <div id="header-right">Content</div>
        </header>
    </body>
</html>

坚持 CSS width/float header

Stuck working on CSS width/float for header

html

css

header

width

css-float