Question

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

<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元素没有占据任何高度。使用高度：100％没有任何影响。

我添加了＆amp; nbsp但仍然没有。

我通常对这种东西很好，但我很难过。有没有人有任何建议？

Answer 1

你的NBleft＆amp; NBright是自我关闭使它像<div></div>

Answer 2

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

我可以看到......

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

应该......

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

要尝试的其他事情是overflow：在你帮忙的div givin的CSS类中自动。只要div有内容，CSS就会确保它显示出来。

Answer 3

我不是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;
}

Answer 4

我最终做的是重组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结构。

分区没有占据全高

4 个答案: