利用可能なスペースに基づいてネストされたdivのサイズを変更します

Question

私は、隣に座っている2つのdivがあり、1つは左にフローティングされ、もう1つは右にフローティングされています。

左の浮動小数点div内には、別の3つの入れ子divがあります。

ネストされたdivが、右側のfloat divから残っている空き領域を占有するように、その幅を調整します。

この魔法はどうすればいいですか？

はここcodepen例を参照してください：ここではhttp://codepen.io/bennygill/pen/bZkJyV

はHTMLである：ここでは

<div class="outer"> 
    <div class="inner-left"> 
    <div class="item">Image and text here. I want all three of these to sit next too each other. But their width should adjust too fill the available space next to the blue "inner-right" content.</div> 
    <div class="item">Image and text here. I want all three of these to sit next too each other. But their width should adjust too fill the available space next to the blue "inner-right" content.</div> 
    <div class="item">Image and text here. I want all three of these to sit next too each other. But their width should adjust too fill the available space next to the blue "inner-right" content</div> 
    </div> 
    <div class="inner-right"> 
    Some other divs and tables go in here. The width of this part will exapand based on the dynamic content it contains. 
    </div> 
</div> 

はCSSです：

/* Maximum width of container */ 
.outer { 
    width: 1000px; 
} 

/* Floats div container to the left */ 
.inner-left { 
    float: left; 
    display: inline-block; 
} 

/* Floats div container to the right */ 
.inner-right { 
    float: right; 
    width: initial; 
    display: inline-block; 
    border: 5px solid blue; 
} 

/* ??? helpe me position these equally in available space ??? */ 
.item { 
    width: 30%; /* This is wrong because they don't adjust to fill the space next to the blue "inner-right" content*/ 
    text-align: center; 
    display: inline-block; 
    border: 5px solid red; 
} 

Answer 1

これは、テーブルのためのいくつかの合法的なユースケースの一つです。これは古いブラウザ（flexboxのみIE10 +）をサポートし、完全に動的です。

/* Maximum width of container */ 
 
.outer { 
 
    width: 1000px; 
 
    display:table; 
 
} 
 

 
/* Floats div container to the left */ 
 
.inner-left { 
 
    vertical-align: -webkit-baseline-middle; 
 
    display: table-cell; 
 
} 
 

 
/* Floats div container to the right */ 
 
.inner-right { 
 
    width: initial; 
 
    display: table-cell; 
 
    border: 5px solid blue; 
 
} 
 

 
/* ??? helpe me position these equally in available space ??? */ 
 
.item { 
 
    width: 30%; /* This is wrong because they don't adjust to fill the space next to the blue "inner-right" content*/ 
 
    text-align: center; 
 
    display: inline-block; 
 
    border: 5px solid red; 
 
}

<div class="outer"> 
 
    <div class="inner-left"> 
 
    <div class="item">Image and text here. I want all three of these to sit next too each other. But their width should adjust too fill the available space next to the blue "inner-right" content.</div> 
 
    <div class="item">Image and text here. I want all three of these to sit next too each other. But their width should adjust too fill the available space next to the blue "inner-right" content.</div> 
 
    <div class="item">Image and text here. I want all three of these to sit next too each other. But their width should adjust too fill the available space next to the blue "inner-right" content</div> 
 
    </div> 
 
    <div class="inner-right"> 
 
    Some other divs and tables go in here. The width of this part will exapand based on the dynamic content it contains. 
 
    </div> 
 
</div>

Answer 2

あなたはディスプレイを利用することができます：フレックス..設定します内左クラスの場合はdisplay: flexです。

/* Maximum width of container */ 
 
.outer { 
 
    width: 1000px; 
 
} 
 

 
/* Floats div container to the left */ 
 
.inner-left { 
 
    float: left; 
 
    display: flex; 
 
} 
 

 
/* Floats div container to the right */ 
 
.inner-right { 
 
    float: right; 
 
    width: initial; 
 
    border: 5px solid blue; 
 
} 
 

 
/* ??? helpe me position these equally in available space ??? */ 
 
.item { 
 
    /* This is wrong because they don't adjust to fill the space next to the blue "inner-right" content*/ 
 
    text-align: center; 
 
    display: inline-block; 
 
    border: 5px solid red; 
 
}

<div class="outer"> 
 
    <div class="inner-left"> 
 
    <div class="item">Image and text here. I want all three of these to sit next too each other. But their width should adjust too fill the available space next to the blue "inner-right" content.</div> 
 
    <div class="item">Image and text here. I want all three of these to sit next too each other. But their width should adjust too fill the available space next to the blue "inner-right" content.</div> 
 
    <div class="item">Image and text here. I want all three of these to sit next too each other. But their width should adjust too fill the available space next to the blue "inner-right" content</div> 
 
    </div> 
 
    <div class="inner-right"> 
 
    Some other divs and tables go in here. The width of this part will exapand based on the dynamic content it contains. 
 
    </div> 
 
</div>

Answer 3

または、最大幅を決定するためにmax-widthプロパティと一緒にCSS calc()機能を使用することができ、ここでのピクルスは、あなたの境界線は、あまりにも多くのスペースを取っている、でした。

/* Maximum width of container */ 
.outer { 
    width: 1000px; 
} 

/* Floats div container to the left */ 
.inner-left { 
    float: left; 
    display: inline-block; 
    max-width: 75% 
} 

/* Floats div container to the right */ 
.inner-right { 
    float: left; 
    max-width: calc(25% - 10px); 
    display: inline-block; 
    border: 5px solid blue; 
} 

/* ??? helpe me position these equally in available space ??? */ 
.item { 
    width: calc(33% - 10px); /* This is wrong because they don't adjust to fill the space next to the blue "inner-right" content*/ 
    text-align: center; 
    display: inline-block; 
    border: 5px solid red; 
} 

More info oncalc() More info onmax-width