Html 一行中有两个div元素，但其中一个是透明的

我想要宽度为100%-330px的灰色div。 如果两个div元素都有bg颜色，那么使用它们会很容易，但我需要一个具有固定大小的透明元素。 我知道我可以用calc解决这个问题，但我宁愿避免它

运输{ 宽度：330px； 浮动：对； 高度：18px； } 灰线{ 背景色：444； 高度：18px； 宽度：100%； } 灰线2{ 背景色：444； 高度：18px； 宽度：calc100%-330px； } 删除.grayline中的宽度并添加330px的右边距：

运输{ 宽度：330px； 浮动：对； 高度：18px； } 灰线{ 背景色：444； 高度：18px； 右边距：330px； } 灰线2{ 背景色：444； 高度：18px； 宽度：calc100%-330px； } 您可以使用右边距：330px表示.grayline

不需要使用2个div

灰线{ 背景色：444； 高度：18px； 右边距：330px； } 灰线2{ 背景色：444； 高度：18px； 宽度：calc100%-330px； }

---

不带calc包装器类div

<div>
      <div class="wrapper">

        <div class="trans-wrapper">
          <div id="transp"></div>
        </div>
        <div id="grayline"></div>
      </div>



    </div>

    <br />
    <div>
      <!--This how it should look-->
      <div id="grayline2"></div>
    </div>

.wrapper {
  display: table;
  position: relative;
  width: 100%
}

.trans-wrapper {
  display: table-cell;
  width: 1%;
  white-space: nowrap;
}

#transp {
  width: 330px;
  height: 18px;
  white-space: nowrap;
  background:red;
}

#grayline {
  background-color: #444;
  height: 18px;
  width: 100%;
  display: table-cell;
}

#grayline2 {
  background-color: #444;
  height: 18px;
  width: calc(100% - 330px);
}

---

Fiddler链接看起来不清晰，你不是简单地使用transp的背景和body一样吗？灰色线条2-使用330像素的填充右侧和边框右侧，并替代计算方法。