没有 flex 的顶部菜单，没有用于遗留支持的 calc(...)

Question

我正在尝试制作带有 1px 边框的顶部菜单。 如何让#mid div 使用完整的中间宽度（以便底部边框接近#right）？

我正在寻找没有 flex、没有 width: calc(...) 的解决方案，因为我测试过的某些设备不支持它（需要旧版支持）。

* { margin:0; padding: 0; }
.left { float:left; width: 155px; height: 60px; border-right: 1px solid #dedede; border-bottom: 1px solid #dedede; }
.mid { float:left; height: 60px; border-bottom: 1px solid #dedede; display:inline-block; }
.right { float: right; width: 40%; height: 60px; border-left: 1px solid #dedede; border-bottom: 1px solid #dedede; }

<div>
<div class="left">aa</div>
<div class="mid">aa</div>
<div class="right">bb</div>
</div>

Answer 1

display:table 布局属性可以帮助您开始使用：(=>IE8)

table shrinks/expands 保存内容。这就是为什么 .mid 将尽可能多地使用 space 压缩其他 table 单元格元素小于 CSS 中设置的 100% 宽度。请注意，如果内容比 tabled 容器宽，它将增长超过 100% 宽度。

* { margin:0; padding: 0;box-sizing:border-box; }
.tb {
  display:table;
  width:100%;
  border:solid 1px;
  }
.tb > div {
  display:table-cell;
  border:inherit ;
  }
.mid { width:100%; }

<div class="tb">
<div class="left">aa</div>
<div class="mid">aa</div>
<div class="right">bb</div>
</div>
<hr/>
<div class="tb">
<div class="left">longer</div>
<div class="mid">aa</div>
<div class="right">longer</div>
</div>

或浮动属性和块格式化上下文:(包括 IE6 添加 zoom:1；除了溢出）

.left 和 .right 将 float 和 排在第一位 .
middle 会介于两者之间，BFC 会避免 .mid 位于浮动元素下方。

div div {
  border:solid 1px ;
  overflow:hidden;/* modify BFC */
  }
.left  {
  float:left;
  }
.right {
  float:right
    }

    <div >
    <div class="left">aa</div>
     <div class="right">bb</div>     
    <div class="mid">mid</div>
    </div>
<hr/><div >
    <div class="left">longer</div>
     <div class="right">longer</div>     
    <div class="mid">mid</div>
    </div>

没有 flex 的顶部菜单，没有用于遗留支持的 calc(...)

Top menu without flex, without calc(...) for legacy support

css

css-float