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％を使用しても効果はありません。

＆nbspを追加しましたが、まだ何もありません。

私は通常、この種のものは得意ですが、困惑しています。誰かアドバイスはありますか？

4

4 に答える 4

0

使用しているHTMLバージョンでセルフクロージングdivが正しくサポートされていますか？代わりに使ってみませんか？

私は見えます...

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

する必要があります...

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

他に試すべきことは、問題のあるdivgivinのCSSクラスのoverflow：autoです。divにコンテンツがある限り、CSSはそれが表示されていることを確認します。

于 2012-06-28T17:05:16.140 に答える
0

あなたのNBleftとNBrightは自己閉鎖的です<div></div>

于 2012-06-28T16:59:54.703 に答える
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 に答える