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

または、ページ上のすべての要素、またはその 1 つのコンテナーに対して、box-sizing プロパティを変更してみることができます。たとえば、ページの各要素について、次のように記述します。

* { box-sizing: border-box; }

これにより、ブラウザが使用するデフォルトのボックスモデルが変更され、パディングの有無にかかわらず要素の幅が変更されなくなります。

于 2013-04-03T13:59:54.830 に答える
4

CSS のカプセル化の階層は次のとおりです: マージン - ボーダー - パディング

オブジェクトにパディングを追加すると、実質的に幅が変更されます。幅が 100px の何かに padding:10px を追加すると、幅は 120px (100 + 10 padding-left + 10 padding right) になります。

これが、コンテナが押し出される理由です（幅：100％）。テーブルの内部に幅：100％の別のコンテナがありますが、テーブルには幅がありません。

于 2012-06-08T09:16:31.097 に答える