动态宽度 - CSS

Question

有没有人知道CSS是否可以实现以下目标？

我希望div.title和div.spacer占用div.row宽度的100％。

我的目标是拥有一个标签式面板。我非常接近，我只是想办法设置宽度.spacer来填充div.row中的剩余空间

以下是我正在做的事情的截图：

这是小提琴：http://jsfiddle.net/yux2jr1n/

＆＃13;

＆＃13;

.row {
  width: 100%;
  display: block;
  display: content-box;
  margin: 0 auto 15px auto;
  border-left: solid 2px rgba(0, 0, 0, 0.3);
  border-right: solid 2px rgba(0, 0, 0, 0.3);
  border-bottom: solid 2px rgba(0, 0, 0, 0.3);
  border-radius: 0px 8px 8px 8px;
  -moz-border-radius: 0px 8px 8px 8px;
  -webkit-border-radius: 0px 8px 8px 8px;
  padding-top: 2em;
  padding-bottom: 2em;
  text-align: left;
  max-width: 1200px;
}
.tab {
  margin-top: -60px;
  display: content-box;
  float: left;
  width: 100%
}
.spacer {
  border-bottom: solid 2px rgba(0, 0, 0, 0.3);
  float: right;
}
.title {
  border-left: solid 2px rgba(0, 0, 0, 0.3);
  border-right: solid 2px rgba(0, 0, 0, 0.3);
  border-top: solid 2px rgba(0, 0, 0, 0.3);
  border-radius: 8px 8px 0px 0px;
  -moz-border-radius: 8px 8px 0px 0px;
  -webkit-border-radius: 8px 8px 0px 0px;
  float: left;
  width: auto;
}
.clearfix {
  display: block;
  clear: both;
  width: 100%;
}

＆＃13;

<section id="Work" class="row">
  <div class="tab">
    <div class="title">
      <h1><Span class="highlight">My Work</Span></h1>
    </div>
    <div class="spacer"></div>
  </div>
  <div class="clearfix"></div>
  <article>Some Content</article>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

更新：请参阅此答案的底部......

我假设你想在＆＃34;标签下方找到一行＆＃34;像这样：

我是这样做的：

    .tab {margin-left:-2px;border-bottom: solid 2px rgba(0,0,0,0.3);margin-right:-2px;}
.title {margin-bottom:-2px;background-color:#fff;padding-left:10px;padding-right:10px;}

删除：

<div class="spacer"></div>

你要做的是使用＆＃34;选项卡＆＃34;添加一个全宽的线条，然后在＆＃34; tab＆＃34;的背景​​中添加一个大的颜色（白色），然后你制作＆＃34;标签＆＃34;下移2 px（保证金：-2px）以覆盖整条线。

如果有更多标签，则可以使用相同的解决方案，并且只希望活动标签下面没有行。

以下是解决方案的提琴手： http://jsfiddle.net/yux2jr1n/2/

- 更新：

看到这个小提琴： http://jsfiddle.net/yux2jr1n/5/

我做了一个＆＃34; sidecover＆＃34;使线条在右侧对齐正确。

我