其他div的動態寬度div？

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

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

那麼如何做到這一點？

來源

2014-10-28 Kovu

可能重複[3列，寬度中等的一個]（http://stackoverflow.com/questions/7292021/3-columns-middle-one-with-flexible-width） – 2014-10-28 12:21:21

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

width: calc(100% - 400px);

例here。

來源

2014-10-28 12:35:07

非常簡單和快速的使用！謝謝！注意！ calc（100％-400px）不工作，只有calc（100％ - 400px）工作！空間是重要的！ – Kovu 2014-10-28 14:21:21

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

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

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

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

來源

2014-10-28 12:22:13 rootman

首先您將所有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;

來源

2014-10-28 12:24:26

您可以使用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

來源

2014-10-28 12:26:56

其他div的動態寬度div？

回答

相關問題