div的百分比保證金？總計100％

Question

想要制作一個類似div / section以百分比表示的網格。 各地的保證金都是一樣的。 http://www.ladda-upp.se/bilder/giefekcmgwmnx/

如果將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;
}

Answer 1

而不是邊距，使用透明或白色邊框以及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％）框定義的寬度將包括邊框寬度。 當然，請更改邊框顏色以使其適合您的實際背景。

Answer 2

請參閱框大小設置屬性。

box-sizing: border-box

此元素上指定的寬度和高度（以及min / max屬性）確定元素的邊框。 也就是說，在元素上指定的任何填充或邊框都將在此指定的寬度和高度內進行布局和繪制。 內容的寬度和高度是通過從指定的“寬度”和“高度”屬性中減去各邊的邊框和填充寬度來計算的

但這僅適用於填充，不適用於邊距。 Twitter Bootstrap使用填充在框之間添加空格。

Answer 3

您可以檢查以下鏈接。

點擊這里

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

祝好運

Answer 4

您正在為每個元素添加邊距，因此寬度需要稍微減小：

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

http://jsfiddle.net/4Xpcj/

div的百分比保證金？總計100％

問題描述

4 個解決方案

解決方案1
2 已采納 2014-01-21 13:46:23

解決方案2
0 2014-01-21 13:47:45

解決方案3
0 2014-01-21 13:49:46

解決方案4
-1 2014-01-21 13:47:20

div的百分比保證金？ 總計100％

問題描述

4 個解決方案

解決方案1 2 已采納 2014-01-21 13:46:23

解決方案2 0 2014-01-21 13:47:45

解決方案3 0 2014-01-21 13:49:46

解決方案4 -1 2014-01-21 13:47:20

div的百分比保證金？總計100％

解決方案1
2 已采納 2014-01-21 13:46:23

解決方案2
0 2014-01-21 13:47:45

解決方案3
0 2014-01-21 13:49:46

解決方案4
-1 2014-01-21 13:47:20