Question

我想让这个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中看到的那样，橙色部分不会出现在红色旁边，而其父级不会滚动。

所以应该发生的事情是左边是红色，右边是橙色，当内容超出父母的边界时，蓝色应该滚动橙色。

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/

任何人都可以使这个CSS工作

1 个答案: