動的な幅のCSS 3 divs

Question

私は短い言葉で説明するために最善を尽くします。

私は3つのdivを持っていますが、それらをA、B、Cと呼ぶことにしましょう。
私はそれらを同じ行にしたいと思います。
私はdiv Bに画像を配置したいが、いくつかの制限があるので、div Bには最大幅と最大高さの制限が欲しい。
次に、サイドのdiv、AとCは、残りのスペースの半分を互いに満たす必要があります。
私はdisplay: tableで試しましたが、画像が占めるスペースで奇妙なことが起こります。

誰も何をすべきか考えていますか？

コードこれまで：

.table 
 
{ 
 
    display: table; 
 

 
    width: 729px; 
 
    height: 343px; 
 
} 
 

 
.left 
 
{ 
 
    display: table-cell; 
 
    background-color: red; 
 
} 
 

 
.center 
 
{ 
 
    display: table-cell; 
 
    max-width: 429px; 
 
    max-height: 343px; 
 
    background-color: green; 
 
} 
 

 
.right 
 
{ 
 
    display: table-cell; 
 
    background-color: deepskyblue; 
 
}

<div class="table"> 
 
    <div class="left"> a </div> 
 

 
    <div class="center"> <img src="https://c1.staticflickr.com/9/8452/7936998300_6ab78565ff_m.jpg"> </div> 
 

 
    <div class="right"> c </div> 
 
</div>

フィドル：https://jsfiddle.net/vasndLt3/

ご覧のように、 "グリーンゾーン" は、画像よりも大きいです。

期待：高さがコンテンツとして更新Image

注意してください。

Answer 1

flexboxで簡単に達成できます。

.table { 
 
    display: flex; 
 
    flex-direction: row; 
 
    width: 729px; 
 
    height: 343px; 
 
} 
 

 
.left { 
 
    flex: 1; 
 
    background-color: red; 
 
} 
 

 
.center { 
 
    max-width: 429px; 
 
    max-height: 343px; 
 
    background-color: green; 
 
} 
 

 

 
.right { 
 
    flex: 1; 
 
    background-color: deepskyblue; 
 
}

<div class="table"> 
 
    <div class="left"> a </div> 
 

 
    <div class="center"> <img src="https://c1.staticflickr.com/9/8452/7936998300_6ab78565ff_m.jpg"> </div> 
 

 
    <div class="right"> c </div> 
 
</div>