HTML構造 - 2つの浮動小数点divの間の空白を埋めよう

Question

私は左右の浮動列の中にいくつかの内容を入れて、すべての空き領域を埋めるレイアウトを実装しようとしています。以下を達成するためにどのようなマークアップ/ CSSを使用できますか？私のコンテンツdivは、常に正しく間違って右の浮動小数点型のdivをラップしています。私がしようとしているものの

フィドルは：fiddle

<div style="float: left;"> 
    left floated content 
</div> 

<div> 
    fill space between left and right floated content 
</div> 

<div style="float: right;"> 
    right floated content 
</div> 

Answer 1

これは、これらの浮かべたdivは幅が固定されている場合は、それを達成することができる方法です。

<div style="float: left; border: 1px solid blue; width: 150px;"> 
    left floated content 
</div> 

<div style="float: right; border: 1px solid green; width:150px;"> 
    right floated content 
</div> 

<div style="margin-right:150px; margin-left:150px;"> 
    fill space between left and right floated content fill space between left and right floated content fill space between left and right floated content fill space between left and right floated content fill space between left and right floated content fill space between left and right floated content fill space between left and right floated content 
</div> 

Answer 2

あなたがしなければならないのは、あなたのdivsdisplay: flexを持つ親に包んであります。

#flex { 
 
    display: flex; 
 
}

<div id="flex"> 
 
    <div style="float: left; border: 1px solid blue; margin-right: 10px;"> 
 
    left floated content 
 
    </div> 
 

 
    <div> 
 
    fill space between left and right floated content fill space between left and right floated content fill space between left and right floated content fill space between left and right floated content fill space between left and right floated content fill 
 
    space between left and right floated content fill space between left and right floated content 
 
    </div> 
 

 
    <div style="float: right; border: 1px solid green; margin-left: 10px;"> 
 
    right floated content 
 
    </div> 
 
</div>