divを残して残りのスペースを埋める方法は？

Question

私は非常に大きな問題を抱えています。私は3つのdivを持っています、2つのdivは一定の幅です、1つは左側に、他は右側にあり、残りのスペースを占有したいです！ 私のコードは動作していません！

ありがとうございます。

HTMLコード

<div class="center"> 
<div class="qwert" id="abc1"><p>Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</div> 
<div class="qwert" id="abc2"><p>Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</div> 
<div class="qwert" id="abc3"><p>Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</div> 
</div> 
</body> 

CSSコード

#abc1{ 
    float: left; 
    width: 200px; 
} 
#abc3{ 
    float: right; 
    width: 200px; 
} 
#abc2{ 
    width: 100%; 
} 

Answer 1

例です。

#abc2{ 
    width: calc(100% - 450px); 
    display: inline-block; 
} 

calc：幅を動的に計算するため。

#abc1{ 
 
    float: left; 
 
    width: 200px; 
 
} 
 
#abc3{ 
 
    float: right; 
 
    width: 200px; 
 
} 
 
#abc2{ 
 
    width: calc(100% - 450px); 
 
    display: inline-block; 
 
}

<div class="center"> 
 
    <div class="qwert" id="abc1"><p>Lorem ipsum dolor sit amet, consectetur 
 
     adipisicing elit, sed do eiusmod 
 
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    <div class="qwert" id="abc2"><p>Lorem ipsum dolor sit amet, consectetur 
 
     adipisicing elit, sed do eiusmod 
 
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
    </div> 
 
    <div class="qwert" id="abc3"><p>Lorem ipsum dolor sit amet, consectetur 
 
     adipisicing elit, sed do eiusmod 
 
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
</div>

Answer 2

*<div style="width:100%"> 
<div style="width:30%"> <p></p> </div> 
<div style="width:40%"> <p></p> </div> 
<div style="width:30%"> <p></p> </div> 
</div>* 

これはFY理解を容易にあなたが使用することができます