html - 一行中的两个 div 元素，但一个是透明的

Question

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

#transp {
  width:330px;
  float:right;
  height: 18px;
}

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

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

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

Answer 1

从 .grayline 中删除 width 并添加 330px 的右边距:

#transp {
  width: 330px;
  float: right;
  height: 18px;
}

#grayline {
  background-color: #444;
  height: 18px;
  margin-right: 330px;
}

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

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