Question

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

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

＆＃13;

* { 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; }

＆＃13;

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

＆＃13;

Answer 1

显示：表格布局属性可以帮助您开始:( =＆gt; IE8）

表收缩/扩展以保存内容。这就是为什么.mid将使用尽可能多的空间，以便将其他表格单元格小于CSS中设置的100％宽度。请注意，如果内容比表格容器宽，它将在100％宽度上增长。

＆＃13;

* { 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%; }

＆＃13;

<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>

＆＃13;

或浮动属性和块格式化上下文:(包括IE6添加缩放：1;旁边溢出）

.left和.right将float和成为流程中的第一个。
介于两者之间，BFC将避免.mid置于浮动元素之下。

＆＃13;

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

＆＃13;

    <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>

＆＃13;

顶级菜单没有flex，没有calc（...）用于传统支持

1 个答案: