在宽度百分比中包含填充/边距？

我怎样才能有width:50%与panel-default，但包括padding或margin（不知道哪一个是更合适的）在计算中，以便panel-default完美填充100％的宽度？在宽度百分比中包含填充/边距？

代码

.testing-here { 
 
    padding: 2.5px; 
 
    display: inline; 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    box-sizing: border-box; 
 
} 
 
.panel-default { 
 
    box-sizing: border-box; 
 
    border-style: none; 
 
    position: relative; 
 
    width: 50%; 
 
    padding-bottom: 40%; 
 
    /* = width for a 1:1 aspect ratio */ 
 
    overflow: hidden; 
 
    background-color: #446CB3; 
 
    border-radius: 0px; 
 
    display: inline-block; 
 
} 
 
.panel-body { 
 
    color: white; 
 
    position: absolute; 
 
}

<div class="testing-here"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
     Basic panel example 
 
    </div> 
 
    </div> 
 
</div>

UPDATE：

现在如果我设置width到50%所有面板垂直下拉，因为它们不能并排放置。

来源

2016-05-17 AnthonyGalli.com

[包括对宽度和高度余量]的可能的复制（http://stackoverflow.com/questions/14416651/including- margin-for-width-and-height） – 2016-05-17 18:01:24

Google“包含宽度的填充边距”。 – 2016-05-17 18:01:51

我做了@torazaburo。更新的问题。 –

您需要：

添加box-sizing:border-box到*,*:before,*:after
修复inline-block差距，你可以做，通过复位父母字体，font-size:0
删除display:inline从.testing-here
添加border到.panel-default

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    margin: 0 
 
} 
 
.testing-here { 
 
    padding: 2.5px; 
 
    font-size: 0 
 
} 
 
.panel-default { 
 
    box-sizing: border-box; 
 
    border-style: none; 
 
    position: relative; 
 
    width: 50%; 
 
    padding-bottom: 40%; 
 
    /* = width for a 1:1 aspect ratio */ 
 
    overflow: hidden; 
 
    background-color: #446CB3; 
 
    border-radius: 0; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    border: 5px white solid 
 
} 
 
.panel-body { 
 
    color: white; 
 
    position: absolute; 
 
}

<div class="testing-here"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
     Basic panel example 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
     Basic panel example 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
     Basic panel example 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
     Basic panel example 
 
    </div> 
 
    </div> 
 
</div>

来源

2016-05-17 18:14:37 dippas

我已经更新了问题。我从你的答案中添加了'font-size：0'到父母div，但问题仍然存在，当面板掉到垂直列 –

@ AnthonyGalli.com我更新了我的答案 – dippas

感谢您的尝试。问题仍然存在：/ –

添加box-sizing: border-box;的元素

来源

2016-05-17 17:56:22 Johannes

...或整个文档。它有助于保持健康。 – isherwood

谢谢@Johannes！但是，当我把它放在'body {}'中，然后使'width：50％'时，面板不再适合行，并且变成了一列。 –

那么最后的结果是什么？ – Johannes

在宽度百分比中包含填充/边距？

回答

相关问题