누구나이 CSS 작업을 할 수 있겠습니까?

Question

나는이 CSS가 작동하도록 노력하고 있습니다.

<div class="GridContainer"> 
    <div class="TopLineContainer"> 
     <div class="ExtraInfoContainer"> 
      Extra info container 
     </div> 
     <div class="GuidedNavigationContainer"> 
      guided nav container 
     </div> 
    </div> 
    <div class="BodyContainer"> 
     <div class="GuidedNavigationTreeContainer"> 
      guided nav item list 
     </div> 
     <div class="ContentContainer"> 
      <div class="ContentDataGrid"> 
       sadfasd fasdf gadsfgkjh asdlfkgjhsdlkjfgh sldkfjhg sadfasd fasdf gadsfgkjh asdlfkgjhsdlkjfgh sldkfjhg sadfasd fasdf gadsfgkjh asdlfkgjhsdlkjfgh sldkfjhg sadfasd fasdf gadsfgkjh asdlfkgjhsdlkjfgh sldkfjhg sadfasd fasdf gadsfgkjh asdlfkgjhsdlkjfgh sldkfjhg 
      </div> 
     </div> 
    </div> 
</div> 

그러나, 당신은 jsFiddle에서 볼 수

jsFiddle

CSS

.GridContainer { 
    width: 99%; 
    height: 500px; 
    border: 1px solid black; 
    display: inline-table; 
    padding: 0; 
    margin: 0; 
} 
.GridContainer .TopLineContainer { 
    border-bottom: 1px solid black; 
    display: inline-table; 
    padding: 0; 
    margin: 0; 
    width: 100%; 
} 
.GridContainer .TopLineContainer .ExtraInfoContainer { 
    width: 180px; 
    border-right: 1px solid black; 
    display: inline-table; 
    padding: 0 0 0 6px; 
    margin: 0 -5px 0 0; 
} 
.GridContainer .TopLineContainer .GuidedNavigationContainer { 
    display: inline; 
    width: 100%; 
    padding: 0 0 0 6px; 
} 
.GridContainer .BodyContainer { 
    display: inline-table; 
    height: 100%; 
    border-bottom: 1px solid black; 
    padding: 0; 
    margin: 0; 
    width: 100%; 
    background-color: Aqua; 
} 
.GridContainer .BodyContainer .GuidedNavigationTreeContainer { 
    float: left; 
    width: 180px; 
    border-right: 1px solid black; 
    display: inline-table; 
    padding: 0 0 0 6px; 
    margin: 0 -5px 0 0; 
    background-color: Red; 
} 
.GridContainer .BodyContainer .ContentContainer { 
    float: left; 
    display: inline-table; 
    padding: 0 0 0 6px; 
    overflow: scroll; 
    background-color: Orange; 
} 
.GridContainer .BodyContainer .ContentContainer .ContentDataGrid { 
    display: inline-table; 
    width: 2400px; 
} 
.ContentDataGrid .ContentDataGridHeader { display: inline-table } 
.ContentDataGrid .ContentDataGridHeader .Column { display: inline-table } 

HTML, 주황색 부분은 빨간색 옆에 나타나지 않고 부모가되지 않습니다 스크롤.

그래서 무슨 일이 일어나야 만할까요? 빨간색이 왼쪽에 있고, 주황색이 오른쪽에 있고 파란색이 내용이 부모 경계를 초과하면 주황색으로 스크롤해야합니다.

Answer 1

데이터를 격자로 배치하는 방법을 보는 것. 이 경우 <table>을 사용하는 것이 가장 좋습니다.

HTML :

<table class="table-grid"> 
    <tr><th>Extra info container</th><th>guided nav container</th></tr> 
    <tr> 
     <td class="extra-info-cell">guided nav item list</td> 
     <td class="guided-nav-cell"> 
      sadfasd fasdf gadsfgkjh asdlfkgjhsdlkjfgh sldkfjhg sadfasd fasdf gadsfgkjh asdlfkgjhsdlkjfgh sldkfjhg sadfasd fasdf gadsfgkjh asdlfkgjhsdlkjfgh sldkfjhg sadfasd fasdf gadsfgkjh asdlfkgjhsdlkjfgh sldkfjhg sadfasd fasdf gadsfgkjh asdlfkgjhsdlkjfgh sldkfjhg 
     </td> 
    </tr> 
</table> 

CSS :

.table-grid { border: 1px solid black; padding:0; margin:0; } 
.table-grid th {line-height: 18px; padding:2px; } 
.table-grid td {line-height: 18px; background: cyan; vertical-align:top; padding:5px; } 
.table-grid .extra-info-cell { background: red; width: 160px; } 

jsFiddle : http://jsfiddle.net/DXg7M/2/ 테이블 형식의 데이터처럼 보이는