2017-12-20 21 views
0

누군가 내 div 클래스가 부모 div 클래스에서 벗어나는 이유를 아는 사람이 있습니까? 나는 그것이 무엇이 잘못되었는지를 모른다!자식 div가 부모 div에서 벗어납니다

피들 링크 및 코드 첨부!

도움 주셔서 감사합니다.

https://jsfiddle.net/cqynLsqu/

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

.table { display: table; } 
 
.row { display: table-row; } 
 
.cell { display: table-cell; }
<div style="border: 1px #000 solid; width: 100%;"> 
 
\t <div style="background-color: #012055; background-image: url(../images/tableTitle.png); height: 40px; line-height: 40px; color: #fff; font-size: 14px; font-weight: bold; padding-left: 10px;"> 
 
\t \t 0 
 
\t </div> 
 

 
\t <div style="width: 100%; margin: 5px;"> 
 
\t \t text text text text text text text text text text text text text text text text text text 
 
\t </div> 
 

 
\t <div class="table" style="width: 100%; margin-right: 5px; margin-left: 5px; border: 1px #000 solid;"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="cell" style="background-color: #012055; background-image: url(../images/tableTitle.png); height: 40px; line-height: 40px; color: #fff; font-size: 14px; font-weight: bold; padding-left: 10px;"> 
 
\t \t \t \t 0 
 
\t \t \t </div> \t \t 
 
\t \t \t <div class="cell" style="background-color: #012055; background-image: url(../images/tableTitle.png); height: 40px; line-height: 40px; color: #fff; font-size: 14px; font-weight: bold; padding-left: 10px;"> 
 
\t \t \t \t 0 
 
\t \t \t </div> 
 
\t \t \t <div class="cell" style="background-color: #012055; background-image: url(../images/tableTitle.png); height: 40px; line-height: 40px; color: #fff; font-size: 14px; font-weight: bold; padding-left: 10px;"> 
 
\t \t \t \t 0 
 
\t \t \t </div> 
 
\t \t \t <div class="cell" style="background-color: #012055; background-image: url(../images/tableTitle.png); height: 40px; line-height: 40px; color: #fff; font-size: 14px; font-weight: bold; padding-left: 10px;"> 
 
\t \t \t \t 0 
 
\t \t \t </div> 
 
\t \t \t <div class="cell" style="background-color: #012055; background-image: url(../images/tableTitle.png); height: 40px; line-height: 40px; color: #fff; font-size: 14px; font-weight: bold; padding-left: 10px;"> 
 
\t \t \t \t 0 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="row"> 
 
\t \t \t <div class="cell"> 
 
\t \t \t \t 0 
 
\t \t \t </div> 
 
\t \t \t <div class="cell"> 
 
\t \t \t \t 0 
 
\t \t \t </div> 
 
\t \t \t <div class="cell"> 
 
\t \t \t \t 0 
 
\t \t \t </div> 
 
\t \t \t <div class="cell"> 
 
\t \t \t \t <b>0</b> 
 
\t \t \t </div> 
 
\t \t \t <div class="cell"> 
 
\t \t \t \t <a href="0">0</a> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t 
 
\t </div> \t 
 

 
</div>

답변

1

변경이 줄이에

<div class="table" style="width: 100%; margin-right: 5px; margin-left: 5px; border: 1px #000 solid;"> 

:

<div class="table" style="width: 100%; margin-right: 5px; border: 1px #000 solid;"> 

margin-left은 콘텐츠를 푸시합니다.

+0

그리고 CSS를 모두 같은 위치 (스타일 시트 나 문서의 '')에 넣으면 아마도 자신이 잘못 생각한 부분을 풀어 냈을 것입니다. –

+0

내 테이블과 부모 테두리 사이에 여백을 유지할 방법이 없습니까? –