我如何計算一箇中心div的寬度

Question

我有三個div s水平堆疊 - >左側，中間和右側。

左右固定寬度爲250px。我希望中心div具有最大可能的寬度。我該怎麼做呢？

一旦這div設置爲最大可能，我將設置它內部的div到margin:0 auto;居中對齊它。

Answer 1

你不需要做任何計算來實現這一點。你可以通過一些巧妙的HTML結構和一點CSS來實現它！

試試這個 - 查看實例在行動，在這裏：http://jsfiddle.net/zfg6m/1/

HTML

<div class="container"> 
    <div class="left-col"> 
     This is my left column! 
    </div> 
    <div class="right-col"> 
     This is my right column! 
    </div> 
    <div class="center-col"> 
     This is my center column 
    </div> 
</div> 

CSS

.left-col { 
    background-color: yellow; 
    float: left; 
} 

.right-col { 
    background-color: orange; 
    float: right; 
} 

.center-col { 
    background-color: blue; 
} 

什麼與此代碼發生？那麼你漂浮在中心列上方的兩列。由於兩個浮標未被清除，因此它們會崩塌併爲中心柱形成空間以填充該區域的100％寬度。這允許您的中心列留在兩列之間，但保持寬度動態。

Answer 2

寬度將是page body width - 500px。

Answer 3

您在這裏定義元素的順序很重要。您需要在之前創建左/右分區，然後在html中創建中心div。這是因爲在知道中心div有多少可用空間之前，瀏覽器需要繪製佈局的左側/右側。

這裏有一個例子。 http://jsfiddle.net/vtvxb/

Answer 4

http://dabblet.com/gist/3743636 '溢出：隱藏'將節省您在這裏。儘管源順序必須如下：

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

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

<div class="center"></div> 

，你不（應該）需要設置保證金爲中心DIV; 'overlflow：hidden'是爲了清除漂浮物，更多的在這裏：http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/（推薦閱讀）。