在div中的Witdh div使用100％，並有填充

我想把一個div放在另一個，並在該div有一個填充10px，這是div寬度爲100％。但爲了做到這一點，該div不在父分區之內。在div中的Witdh div使用100％，並有填充

實施例在這裏的jsfiddle：

.caixa 
{ 
    float : left; 
    width:100%;  
    background-color:white; 
    padding:25px; 
}

另一個問題我有，我已經離開與150像素的寬度和另一格對準的div來佔用所有剩餘的空間和填充。

來源

2013-03-21 Marlon Tiedt

只需使用'盒大小： '.caixa' div的border-box。當然，爲了讓它跨瀏覽器，你需要使用前綴。 – 2013-03-21 11:25:48

默認CSS盒模型計算元件的最終寬度作爲其width，border和padding的總和。您可以通過使用box-sizing財產克服這種混亂的行爲：

.caixa 
{ 
    float : left; 
    width:100%;  
    background-color:white; 
    padding:25px; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

http://jsfiddle.net/kCypn/7/

讀到它：http://css-tricks.com/box-sizing/
瀏覽器支持：http://caniuse.com/#feat=css3-boxsizing

來源

2013-03-21 11:25:59 dfsq

width + padding = Total value所以導致滾動條。從.caixa

.caixa 
{  
    background-color:white; 
    padding:25px; 
}

DEMO

來源

2013-03-21 11:26:06 Sowmya

Tks ... 而另一種情況，我想有一個div固定在左側，其值爲X，另一個div佔據剩餘的所有空間，以便第二個div具有動態寬度，第一個div始終是固定的。 – 2013-03-21 11:54:22

刪除float和width現在刪除float或width 100%在.caixa類因爲格是媒體鏈接width 100%;現在定義padding如你所願

.caixa{ 
    float : left; // remove this line 
    width:100%; // remove this line 

}

Demo Full screen

Demo in window

我檢查你的代碼他們不需要float left或width 100%在類.caixa

來源

2013-03-21 11:28:59

在div中的Witdh div使用100％，並有填充

回答

相關問題