Question

我正在为我的网站制作移动版本，而且我遇到了一个问题。我有一个外部div，我希望在整个宽度上伸展，然后我希望其中的4个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方法来实现这一点。

Answer 1

您可以使用calc()从元素的宽度中减去2px。

jsFiddle example

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

但是，这会在最后一个元素上产生2px页边距。要解决此问题，请添加：

jsFiddle example

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

或者，您可以使用基于百分比的边距。

Answer 2

您也可以使用％作为边距。 IE：

margin: 0 0 0 1%;

确保通过减小宽度来补偿边距。因此，对于“内部”类而言，不是25％，而是使用24％来实现上述保证金。

Fiddle纳入上述

Answer 3

您可以使列扩展24％并在它们之间执行基于％的边距。

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

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

Answer 4

您可以使用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/ width a background-image和translucid color http://jsfiddle.net/g5mgD/9/

Answer 5

我会将元素和边距内的100％划分为：

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

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

如果希望外边距和内边距具有相同的大小，则可以为第一个元素指定特定边距。

如何将内部divs宽度设置为带边距的百分比

5 个答案: