垂直對齊並填充3個塊的剩餘空間

Question

我需要垂直對齊3個塊，其中中心塊應占用剩餘空間，並且橫向塊被自動化。

我的代碼（PEN）：

.parent { 
 
    background: lightgray; 
 
    //display: table; 
 
} 
 

 
[class|="i"] { 
 
    display: inline-block; 
 
    //display: table-cell; 
 
    padding: 5px; 
 
    margin: 0; 
 
} 
 

 
.i-left { 
 
    background: green; 
 
} 
 

 
.i-full { 
 
    background: lightgreen; 
 
    width: 30%; 
 
    vertical-align: middle; 
 
} 
 

 
.i-right { 
 
    background: lightblue; 
 
}

<div class="parent"> 
 
    <div class="i-left">[min space left long size]</div> 
 
    <div class="i-full"> 
 
     [long content to fill the row long content to fill the row long content to fill the row long content to fill the row long content to fill the row long content to fill the row long content to fill the row long content to fill the row long content to fill the row] 
 
    </div> 
 
    <div class="i-right">[min space right]</div> 
 
</div>

=== 限制

• 任何固定尺寸應的罰款;
• 橫向塊widht是可變的並且自動調整大小（與table S上的變體，其註釋的不尊重了這一點）;
• 任何flex應該使用（因爲IE9不兼容）;
• 塊應該垂直中間對齊;
• 塊可以做什麼（內聯，表，單元格等）。

Answer 1

佈局的CSS表格和white-space:nowrap關於「autosize」的左/右單元格，因此文本不會換行。

.parent { 
 
    background: lightgray; 
 
    display: table; 
 
} 
 
[class|="i"] { 
 
    display: table-cell; 
 
    padding: 5px; 
 
    margin: 0; 
 
    vertical-align: middle; 
 
} 
 
.i-left { 
 
    background: green; 
 
    white-space: nowrap 
 
} 
 
.i-full { 
 
    background: lightgreen; 
 
} 
 
.i-right { 
 
    background: lightblue; 
 
    white-space: nowrap 
 
}

<div class="parent"> 
 
    <div class="i-left">[min space left long size]</div> 
 
    <div class="i-full"> 
 
    [long content to fill the row long content to fill the row long content to fill the row long content to fill the row long content to fill the row long content to fill the row long content to fill the row long content to fill the row long content to fill 
 
    the row] 
 
    </div> 
 
    <div class="i-right">[min space right]</div> 
 
</div>

Codepen Demo