5

示例： 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>
4

2 回答 2

5

或者，您可以尝试更改 box-sizing 属性，无论是针对页面上的每个元素，还是仅针对那个容器。例如，对于页面上的每个元素，您可以编写：

* { box-sizing: border-box; }

这将改变浏览器使用的默认框模型，以便元素的宽度不会改变，无论是否填充。

于 2013-04-03T13:59:54.830 回答
4

CSS中封装的层次是：margin-border-padding

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

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

于 2012-06-08T09:16:31.097 回答