任何人都可以讓這個CSS工作

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

<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看到，橙色部分不旁邊似乎紅色和其父不滾動。

因此，應該發生的事情是，紅色在左邊，橙色在右邊，當內容超出父級的邊界時，藍色應該滾動橙色。

來源

2013-07-01 griegs

這看起來像表格數據 - 爲什麼不使用的表呢？ – jzm

好問題。當屏幕寬度與不同電腦的不同時，我遇到了很多問題 – griegs

請參閱下面的答案 – jzm

看你是如何將數據佈局爲網格的。在這種情況下最好使用<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/

來源

2013-07-01 01:31:12 jzm

任何人都可以讓這個CSS工作

回答

相關問題