CSS - 显示表上的填充溢出其容器

Question

示例:http://www.homeroe.com/homeroe.com/newHome/pulpaForum/test.php

为什么每当我添加填充时表div都会从容器中出来？

有没有解决这个问题的方法？

<style>
.foroContainer {
    width: 700px;
    margin-left: auto; 
    margin-right: auto; 
    background: yellow;
}

.foroContainer .table{
    display: table;
    width: 100%;
    padding: 8px;
    border: 1px solid #a9a9a9;
    margin-bottom: 1em;
}

.foroContainer .row{
    display: table-row;
}

.foroContainer .cell{
    display: table-cell;
}

#right.cell{
    text-align: right;
    border-top: 1px solid #a9a9a9;
}
}
</style>

<div class="foroContainer">
<div class="table">
    <div class="row">
        <div class="cell">asdasdasdas</div>
    </div>
    <div class="row">
        <div id="right" class="cell">asdasdas | asdasdsad | asdasdasdas</div>
    </div>
</div>

Answer 1

或者,您可以尝试更改box-sizing属性,对于页面上的每个元素,或只是一个容器.例如,对于页面上的每个元素,您可以编写:

* { box-sizing: border-box; }

这将改变浏览器使用的默认框模型,以便不更改元素的宽度,填充或不填充.

Answer 2

CSS中封装的层次结构为：margin - border - padding

当您向对象添加填充时，您实际上改变了它的宽度。如果某个东西的宽度为 100px，并且添加 padding:10px，则其宽度将变为 120px（100 + 10 padding-left + 10 padding right）

这就是您的容器被推倒的原因（其宽度：100％），一个好的方法是在表内部放置另一个宽度为100％但表没有宽度的容器。