如何設置內部div寬度作爲百分比保證金

我正在爲我的網站設計一個移動版本，但我遇到了問題。我有一個外部div，我想要在整個寬度上拉伸，然後我希望4個div內的寬度相等，並在它們之間留有餘量。如何設置內部div寬度作爲百分比保證金

如果我不需要它們之間的餘量，這將很容易。我會簡單地設置width:25%並完成它，但我想要他們之間的3像素邊距。設置此邊距時，實際寬度將超過100％，因此佔用div中的多行。

我想過要設置一個負值margin-left，但這只是擺脫了右邊的餘量。

CSS：

.wrapper { 
width:300px; 
height:50px; 
background-color:#f00; 
} 

.inner { 
width:25%; 
margin-right:2px; 

float:left; 
background-color:#00f; 
}

這裏是一個fiddle所以你可以看到正是我的意思。

順便說一句，我知道我可以在頁面加載後使用一些jQuery或JavaScript來實現這一點，但我想知道是否有純粹的CSS方式來做到這一點。

來源

2013-12-13 jas7457

您也可以使用％作爲您的利潤率。 IE：

margin: 0 0 0 1%;

只要確保用寬度減小來補償邊距。因此，對於「內部」類而不是25％，您將使用24％作爲上述保證金實施。

Fiddle載有上述

來源

2013-12-13 21:43:05

可以使用calc()從元件的寬度減去2px。

jsFiddle example

.inner { 
    width:calc(25% - 2px); 
}

但是，這導致在最後一個元素上2px保證金。爲了解決這個問題，加入：

jsFiddle example

.inner:last-child { 
    width:25%; 
    margin-right:0; 
}

或者，你可以只使用基於百分比的利潤。

來源

2013-12-13 21:43:31

這正是我一直在尋找的！我不知道這個在css中的「calc」函數。你知道這是否會保持它最初計算的值，或者如果屏幕分辨率發生變化，它是否會更新（例如，從縱向切換到橫向，它是否會正確更新寬度？） – jas7457

已更新，但唯一的是兼容性IE> = 9 – DaniP

@ jas7457它會更新。這裏是[示例]（http://jsfiddle.net/JoshC/SdzsW/2/） - 根據寬度百分比調整瀏覽器的大小以動態更新。除此之外，正如Danko指出的那樣 - 它是[不支持IE8及更低版本]（http://caniuse.com/calc），但我真的不擔心這一點。 –

您可以使這些列擴展24％，並在它們之間執行基於％的邊距。

.wrapper { 
    width:100% 
    height:50px; 
    background-color:#f00; 
    overflow:hidden; 
} 

.inner { 
    width:24%; 
    margin:0 .5%; 
    float:left; 
    background-color:#00f; 
}

來源

2013-12-13 21:46:21 user3100889

你可以使用border和box-sizing包括你的25％的寬度這裏面2px的差距。

如果背景不是純色，那麼邊框應該是透明的，背景色應繪製爲插入陰影。

.inner { 
    width:25%; 
    border-right:2px solid transparent; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 
    float:left; 
box-shadow:inset 0 0 0 10000px #00f;/* make it big , so it doesnt matter wich size it becomes.*/ 
}

http://jsfiddle.net/g5mgD/4/ 寬度的背景圖像和一個半透明的彩色http://jsfiddle.net/g5mgD/9/

來源

2013-12-13 21:53:58

我會分裂元件內的100％，並且餘量像這樣：

.inner { 
    width:24%;   
    margin: 0.5%;  

    float:left; 
    background-color:#00f; 
}

如果希望外邊緣並且內邊距的大小相同，則可以爲第一個元素分配特定邊距。

來源

2013-12-13 21:54:27 srrvnn

如何設置內部div寬度作爲百分比保證金

回答

相關問題