1つの行に2つのdiv要素がありますが、1つは透明です。

Question

幅のある灰色のdivが必要です（100％〜330ピクセル）。 両方が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の右マージンを追加します。

あなたが .graylineのため margin-right: 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>

Answer 2

カルクなしで2つのdivを

#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="grayline"></div> 
 
</div> 
 
<br /> 
 
<div> 
 
    <!--This how it should look--> 
 
    <div id="grayline2"></div> 
 
</div>

Answer 3

を使用する必要はありませんが（）のラッパークラスの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); 
} 

フィドラーリンクhttps://jsfiddle.net/prnrjdt5/