css - 没有 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)

表格收缩/扩展以容纳内容。这就是为什么 .mid 将使用尽可能多的可用空间来压缩其他表格单元格元素，这些元素小于 CSS 中设置的 100% 宽度。请注意，如果内容比表格容器宽，它将增长超过 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>

或 float 属性和 block 格式化上下文:(包括 IE6 添加缩放:1；除了溢出)

• .left 和 .right 将 float 并成为流程中的第一位。

• middle 会介于两者之间，BFC 会避免 .mid 位于 float 元素之下。

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>