动态宽度 - CSS

Question

有谁知道以下内容是否可以用 CSS 实现？

我希望 div.title 和 div.spacer 占据 div.row 宽度的 100%。

我的目标是拥有一个选项卡式面板。我已经很接近了，我只是想不出一种方法来设置 .spacer 的宽度来填充 div.row 中的剩余空间

这是我正在做的事情的屏幕截图：

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

.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%;
}

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

Answer 1

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

我假设你想要在“选项卡”下面有一行，如下所示：

我是这样做的：

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

您要做的就是使用“选项卡”添加一条全宽的线，然后在“选项卡”的背景上添加大量颜色（白色），然后使“选项卡”向下移动 2 px（边距： -2px) 覆盖整条线。

当您有更多选项卡时，您可以使用相同的解决方案，并且您只希望活动选项卡下面没有行。

这里是fiddler的解决方案： http://jsfiddle.net/yux2jr1n/2/

-- 更新：

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

我做了一个“侧盖”，使线条在右侧正确对齐。