在寬度百分比中包含填充/邊距？

我怎樣纔能有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

在寬度百分比中包含填充/邊距？

回答

相關問題