div elemanları

Question

Sorum sırasını değiştirmeden kalan genişliğini doldurmak olun bu bir aynıdır: make a div fill up the remaining width

Ama div sırasını değiştirmek istemiyoruz. Benim özel durumda

, ben olmasını istiyorum: Ben div sırasını yeniden eğer

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; 

bu işi yapabilir, ama bunu yapmak istemiyorum çünkü mobil cihazlarda Bütün divların genişliğini% 100 yapmak istiyorum ve sipariş kalmalıdır. Bunu yapmanın bir yolu var mı? Flexbox tek çözüm mü?

Answer 1

calc()'u kullanmanız yeterlidir. Ebeveyn div boyutu değiştirdiğinde, 100% güncellenir ve calc() olacaktır. Bu aynı zamanda tam olarak yanıtlanması gerektiği anlamına gelir.

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

Answer 2

aşağıdakileri deneyin, ayrıca duyarlı!

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