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并且你添加填充：10px它的宽度将变为120px（100 + 10填充左+ 10填充右）

这就是你的容器被推过的原因（它的宽度：100％）一个好方法是你的桌子内部的另一个容器宽度：100％，但没有宽度的表。

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

2 个答案: