1

私が使っているCSSはこちらです。

.hentry {
    padding: 40px 0;
    max-width: 840px;
    margin: 0 auto;
    background-color: #fff;
}
.hentry:before {
    box-shadow: -15px 0 15px -15px inset;
    content: " ";
    height: 100%;
    left: -15px;
    position: absolute;
    top: 0;
    width: 15px;
}
.hentry:after {
    box-shadow: 15px 0 15px -15px inset;
    content: " ";
    height: 100%;
    position: absolute;
    right: -15px;
    width: 15px;
}


.widget-area {
    margin: 0 auto;
    max-width: 840px;
    width: 100%;
    background-color: #fff;
    border-top: #cd0a2b solid 5px;
}
.widget-area:before{
    box-shadow: -15px 0 15px -15px inset;
    height: 100%;
    left: -15px;
    position: absolute;
    top: 0;
    width: 15px;
}
.widget-area:after{
    box-shadow: 15px 0 15px -15px inset;
    height: 100%;
    position: absolute;
    right: -15px;
    width: 15px;
}


.site-info {
    margin: 0 auto;
    max-width: 840px;
    padding: 30px 0;
    width: 100%;
    border-top: #cd0a2b solid 5px;
    background-color: #fff;
}
.site-info:before {
    box-shadow: -15px 0 15px -15px inset;
    height: 100%;
    left: -15px;
    position: absolute;
    top: 0;
    width: 15px;
}
.site-info:after {
    box-shadow: 15px 0 15px -15px inset;
    height: 100%;
    position: absolute;
    right: -15px;
    width: 15px;
}

そしてHTML

<article id="post-2" class="post-2 page type-page status-publish hentry">/article>

<div class="widget-area masonry" style="position: relative; height: 424px;"></div>

<div class="site-info"></div>

しかし、何らかの理由で、ボックスの影はウィジェット領域でのみ機能します。私はこれを数時間行ってきましたが、何か問題を見つけることはできませんが、同様に、それを機能させる方法を理解することもできません.

ボックスの影のコードは、もともとこの Jfiddle http://jsfiddle.net/Qq5tQ/からのものです。

何か案は？

編集：解決策

右！私はそれを修正しました。解決策は @Pete の usingposition: relative;でしたが、それ以上のことが必要でした。何らかの理由で、それらにbox-shadow必要なすべてのクラスcontent: " ";は問題ありませんでしたが、すべてのアフターが欠落していましたtop: 0;.

それを追加した後、それを機能させるには、少し磨きをかけるだけでした.site-info。繰り返しますが、理由がよくわかりませんが、上から約 5 ピクセル離れています (おそらく以前に作成したパディングの問題です) が、以下に示すようにtopandを変更することで修正されましたheight。

.site-info:before {
box-shadow: -15px 0 15px -15px inset;
height: 106%;
content: " ";
left: -15px;
position: absolute;
top: -5px;
width: 15px;
}

.site-info:after {
box-shadow: 15px 0 15px -15px inset;
height: 106%;
content: " ";
position: absolute;
right: -15px;
top: -5px;
width: 15px;
}

すべての助けをありがとう。お二人がいなかったらできなかった。

4

1 に答える 1

1

.entry-headerに変更する必要があるというアイテムがなく、に.hentry追加する必要がありposition:relativeます。.site-info.hentry.widget-area

于 2013-11-05T16:28:34.093 に答える