のdiv要素が

Question

私の質問の順序を変更することなく、残りの幅をいっぱい作ることは、この1と同じである：make a div fill up the remaining width

しかし、私はdiv要素の順序を変更する必要はありません。私の特定の場合には

、私が持っているしたいと思います：

div float: left; width: 100% - 500px; (i.e. this should take up all the remaining space) 
div float: right; width: 250px; 
div float: right; width: 250px; 

私はdiv要素の順序を並べ替える場合、私はこの作業を行うことができますが、私は理由はモバイルデバイスであることを行うにはしたくありません私はすべてのdivの幅を100％にしたいと思いますし、注文は残るべきです。これを行う方法はありますか？フレックスボックスは唯一のソリューションですか？

Answer 1

単にcalc()を使用してください。親divのサイズが変更されると、いつでも100%が更新されますので、calc()も更新されます。これは完全応答性でなければならないことを意味します。

.my-div { 
    width: calc(100% - 500px); 
} 

Answer 2

以下も試してみてください。

.w-250{ 
 
    width: 250px; 
 
    height: 75px; 
 
    
 
    float: right; 
 
    border: 1px solid red; 
 
} 
 
#r-boxer{ 
 
    overflow: hidden; 
 
} 
 
#r-elem{ 
 
    width: 99%; 
 
    height: 75px; 
 
    
 
    border: 1px solid blue; 
 
}

<div id="container"> 
 
    <div class="w-250">Width 250px;</div> 
 
    <div class="w-250">Width 250px;</div> 
 
    <div id="r-boxer"><div id="r-elem">Remaining Space</div></div> 
 
</div>