其他div的動態寬度div？

Question

我有一個設計，應該是：
左容器200像素
中段容器動態
正確的容器200像素

這意味着對華門戶容器應儘可能多寬越好，specialy當用戶改變瀏覽器。
我知道我所描述的是一張桌子的完美的東西，左右td到寬度= 200，中間td沒有寬度，中間的大小完全適合屏幕上的刮痕。
但由於給定的原因，我必須在這裏使用Div容器而不是表格。

那麼如何做到這一點？

Answer 1

可以使用計算（）方法到中間容器等：

width: calc(100% - 400px); 

例here。

Answer 2

給中間的一個margin: 0 200px;

左邊的一個：margin-right: -200px;

的正確的：margin-left: -200px;

而且讓他們漂浮。確保將外部寬度的寬度設置爲200px。

Answer 3

首先您將所有divs定義爲display: inline-block，然後將樣式左右分別調整爲寬度爲200px的divs並讓它們浮動。然後將容器寬度設置爲所需的寬度。

<div class='container'> 
    <div class='right'> 
     col3 
    </div> 
    <div class='left'> 
     col1 
    </div> 
    <div class='middle'> 
     col2 
    </div> 
</div> 

然後給中間的一個margin: 0 200px;

左邊的一個：margin-right: -200px;

的正確的：margin-left: -200px;

Answer 4

您可以使用display: table複製，象這樣的div表的行爲：

<div class="wrapper"> 
    <div class="left"></div> 
    <div class="middle"></div> 
    <div class="right"></div> 
</div> 

.wrapper { 
    display: table; 
    width: 100%; 
} 
.wrapper div { 
    display: table-cell; 
} 
.left { 
    width: 200px; 
} 
.right { 
    width: 200px; 
} 

Demo @ CodePen