CSS 3 Div浮動與液體中心div

這是一個相當簡單的問題，但我不明白什麼是錯的。CSS 3 Div浮動與液體中心div

我有三個div，2個設置的像素大小，另一個（中間）填充了兩個之間的剩餘空間。

|------|--------------------------|------| 
|  |       |  | 
|  |       |  | 
|  |       |  | 
|------|--------------------------|------| 
     <--------------------------> 
       Width Fill

我有以下的CSS：

左股利

#leftdiv { 
    height: 50px 
    width: 50px; 
    float: left; 
    }

中東事業部

#middlediv { 
    min-width: 270px; 
    width: calc(100% - 100px); 
    width: -moz-calc(100% - 100px); 
    width: -webkit-calc(100% - 100px); 
    width: -o-calc(100% - 100px); 
    float: left; 
}

右事業部

#rightdiv { 
    width: 100px; 
    height: 50px; 
    float: right; 
}

我在這裏簡單，但基本上是正確的div實際上並不浮動，它會像下面這樣：

|------|--------------------------| 
|  |       | 
|  |       |  
|  |       |  
|------|--------------------------| 
           |------| 
           |  | 
           |  | 
           |  | 
           |------|

來源

2013-07-11 DorianHuxley

ŧ他通常會在父div（包含右列的寬度）不夠寬的情況下發生 – Pattle

嘗試在HTML中首先放置正確的「div」。如果您想要更詳細的答案，請進行[演示]（http://jsfiddle.net/）。 – thirtydot

謝謝！這工作完美。 – DorianHuxley

clear:both使該元素低於任何漂浮它之前的文檔中的元素。

所以請嘗試使用clear: both在#rightdiv。

欲瞭解更多信息，請查閱SO Answer。

來源

2013-07-11 10:17:55 Praveen

#middlediv { 
    min-width: 270px; 
    width: calc(100% - 150px); 
    width: -moz-calc(100% - 150px); 
    width: -webkit-calc(100% - 150px); 
    width: -o-calc(100% - 150px); 
    float: left; 
}

你div的寬度的總和超過了屏幕的寬度，所以正確的股利推下

來源

2013-07-11 10:17:59 Gangadhar

你#rightDiv具有100像素的寬度時，它需要有一個寬度50像素

#rightdiv { 
    width: 50px; 
    height: 50px; 
    float: right; 
}

否則，左，右的div的總寬度爲150像素，並且您只減去100像素

width: calc(100% - 100px); //100px is too small

來源

2013-07-11 10:18:13 Pattle

CSS 3 Div浮動與液體中心div

回答

相關問題