CSS - Dopełnienie na stole Wyświetlacz przelewem opakowanie

Question

Przykład: http://www.homeroe.com/homeroe.com/newHome/pulpaForum/test.php

Dlaczego jest to, że div tabela wychodzi z pojemnika ilekroć dodać dopełnienie?

Czy jest jakiś problem związany z tym problemem?

<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

Hierarchia enkapsulacji w CSS jest: margines - granica - dopełnienie

Podczas dodawania dopełnienie do obiektu praktycznie zmieniać jego szerokość. Jeśli coś ma szerokość 100px i dodasz dopełnienie: 10px, jego szerokość zmieni się na 120px (100 + 10 padding-left + 10 padding right)

To jest powód, dla którego twój kontener jest przepchnięty (jego szerokość: 100%) dobrym sposobem byłby inny pojemnik wewnątrz twojego stołu o szerokości: 100%, ale stół bez szerokości.

Answer 2

Alternatywnie możesz spróbować zmienić właściwość wielkości skrzynek, albo dla każdego elementu na stronie, albo tylko dla jednego kontenera. Na przykład. dla każdego elementu na stronie, należy napisać:

* { box-sizing: border-box; } 

To będzie zmieniać domyślny model blokowy, że przeglądarka używa tak, że szerokość elementu nie ulegnie zmianie, obicia, czy nie.