股利与百分比？总计100％

想要制作一个看起来像这样的网格，其中div/section为百分比。保证金在任何地方都一样。 http://www.ladda-upp.se/bilder/giefekcmgwmnx/股利与百分比？总计100％

如果我把margin设置为1px，但我想使用margin 1em或10px左右，下面的代码有效。我怎么做？

HTML

<html> 
    <head> 
     <title>Title</title> 
     <link rel="stylesheet" type="text/css" media="all" href="default.css" /> 
    </head> 
    <body> 
    <div class="box small"></div> 
    <div class="box small"></div> 
    <div class="box small"></div> 
    <div class="clear"></div> 
    <div class="box small"></div> 
    <div class="box large"></div> 
    </body> 
</html>

CSS

.box { 
    height:50px; 
    margin:1em; 
    background:#000; 
    float:left; 
} 
.small { 
    width:33%; 
} 
.large { 
    width:66%; 
} 
.clear{ 
    clear:both; 
}

来源

2014-01-21 Xtreme

为什么不使用其他'DIV'的'DIV.box'内，你就可以到任何保证金或填充应用到它，它不会破坏你的'DIV.box'百分比。 –

代替余量，使用透明或白色边框与box-sizing属性

.box { 
    height: 50px; 
    border: 1em solid #fff; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    background: #000; 
    float: left; 
}

这样做，对于large限定的宽度（沿66％）和small（33％）盒将会增加卢德的边界宽度。当然，改变边框颜色，以适应您的实际背景。

来源

2014-01-21 13:46:23 fcalderan

-1

你将边缘到各部分，使得宽度需要稍微下降：

.small { 
    width:26%; 
} 
.large { 
    width:59%; 
}

http://jsfiddle.net/4Xpcj/

来源

2014-01-21 13:47:20

这实际上是一个肮脏的修复。尝试减小窗口的大小：这不再工作。 –

同意，不好的解决方案 – Xtreme

见box-sizing属性。

box-sizing: border-box

此元件上的规定的宽度和高度（和最小/最大属性）确定该元件的边界框。也就是说，任何填充或在元素上指定的边框都被布置并绘制在此指定的宽度和高度内。内容宽度和高度减去从指定的“宽度”与各边和“高度”属性

的边界和填充宽度计算但这仅具有填充，没有余量的工作原理。 Twitter Bootstrap使用填充来在框之间添加空格。

来源

2014-01-21 13:47:45

您可以点击下面的链接。

Click here

.BigBox{ width:40%; height:225px;} 
.SmallBox{ width:20%;height:225px;} 
.InnerBox{ padding:10px; margin:0px 10px 0px 10px; border:solid 1px #666666;}

好运

来源

2014-01-21 13:49:46

股利与百分比？总计100％

回答

相关问题