0

我有一个 div 结构的 9 框，如下所示：

<div class="NBWrapper">
    <div class="NBTopRow">
        <div class="NBLeft" />
        <div class="NBRight" />
        <div class="NBMiddle" />
    </div>
    <div class="NBMiddleRow">
        <div class="NBLeft">&nbsp</div>
        <div class="NBRight">&nbsp</div>
        <div class="NBMiddle">SharePoint WebPart goes here</div>
    </div>
    <div class="NBBottomRow">
        <div class="NBLeft" />
        <div class="NBRight" />
        <div class="NBMiddle" />
    </div>
</div>

并具有以下 CSS 规则：

.NBTopRow .NBLeft {
height: 18px;
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-top-left.png') no-repeat;
}
.NBTopRow .NBRight {
height: 18px;
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-top-right.png') no-repeat;
}
.NBTopRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
height: 18px;
background: transparent url('/Style Library/Images/qp-bg-top.png') repeat-x;
}
.NBMiddleRow .NBLeft {
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-left.png') repeat-y;
}
.NBMiddleRow .NBRight {
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-right.png') repeat-y;
}
.NBMiddleRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
background-color: #ffffff;
}
.NBMiddleRow {
height: 100%;
}
.NBBottomRow .NBLeft {
height: 18px;
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-bottom-left.png') no-repeat;
}
.NBBottomRow .NBRight {
height: 18px;
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-bottom-right.png') no-repeat;
}
.NBBottomRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
height: 18px;
background: transparent url('/Style Library/Images/qp-bg-bottom.png') repeat-x;
}

一切都在正确的位置并具有正确的属性，但是中间行的 NBLeft 和 NBRight 元素不占用任何高度。使用 height:100% 没有任何效果。

我已经添加了   ，但仍然没有。

我通常很擅长这种东西，但我很难过。有人有建议吗？

4

4 回答 4

0

你的 NBleft 和 NBright 是自动关闭的，让它像<div></div>

于 2012-06-28T16:59:54.703 回答
0

您使用的 HTML 版本是否正确支持自关闭 div？您可以尝试改用吗？

我可以看到...

<div class="NBMiddle">SharePoint WebPart goes here<div>

应该 ...

<div class="NBMiddle">SharePoint WebPart goes here</div>

其他要尝试的事情是溢出：div 的 CSS 类中的自动给你带来麻烦。只要 div 有内容，CSS 就会确保它被显示。

于 2012-06-28T17:05:16.140 回答
0

我不是 100% 确定您要做什么，但是以下内容有帮助吗？我已经为所有内容添加了边框，因此您可以看到正在发生的事情。

的HTML...

<html>

<head>
    <link rel="stylesheet" media="screen" href="bla.css" >
</head>

<body>

<div class="NBWrapper">
    <div class="NBrow">
        <div class="NBcell">Top Left</div>
        <div class="NBcell">Top Middle</div>
        <div class="NBcell">Top Right</div>
    </div>

    <div class="NBrow">
        <div class="NBcellFullHeight">Middle Left</div>
        <div class="NBcellFullHeight">Middle Middle</div>
        <div class="NBcellFullHeight">Middle Right</div>
    </div>

    <div class="NBrow">
        <div class="NBcell">Bottom Left</div>
        <div class="NBcell">Bottom Middle</div>
        <div class="NBcell">Bottom Right</div>
    </div>
</div>

</body>
</html>

然后CSS...

.NBWrapper {
    width: 800px;
    margin: auto;
}

.NBcell {
    width: 266px;
    float: left;
    border: 1px solid #000000;
}
.NBrow {
    float: left;
    width: 804px;
    border: 1px solid #000000;
}

.NBcellFullHeight {
    width: 266px;
    float: left;
    height: 500px;
    border: 1px solid #000000;
}
于 2012-06-28T19:15:52.440 回答
0

我最终做的是重组 div：

<div class="NBWrapper">
<div class="NBTopRow">
    <div class="NBLeft" />
    <div class="NBMiddle" />
    <div class="NBRight" />
</div>
<div class="NBMiddleRow">
    <div class="NBLeft">&nbsp</div>
    <div class="NBMiddle">SharePoint WebPart goes here</div>
    <div class="NBRight">&nbsp</div>
</div>
<div class="NBBottomRow">
    <div class="NBLeft" />
    <div class="NBMiddle" />
    <div class="NBRight" />
</div>
</div>

去掉属性中的浮动和边距并添加：

.NBWrapper {
display: table;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}

.NBTopRow, .NBMiddleRow, .NBBottomRow {
display: table-row;
}

.NBLeft, .NBRight, .NBMiddle {
    display: table-cell;
}

你可能会问，为什么不直接用一张桌子？SharePoint 2010 可能使用较少的表格，但它仍然是表格。我更喜欢使用 div 结构。

于 2012-06-28T21:29:31.440 回答