2

次のコードは、新しいサイドバーウィジェットが挿入されるたびに表示されるようにテンプレートに設定されています。（新しいウィジェットごとに表示されます）

<div class="sidebox-top"></div>
<div class="sidebox">
   <div class="widgets">
      <div class="textwidget">
      [WIDGET CONTENT]
      </div>
   </div>
</div>

上記は、次のCSSを表示します。

.sidebox-top {
    background-image: url("/images/top-border-side.gif");
    background-position: center top;
    background-repeat: no-repeat;
    height: 4px;
}
.sidebox {
    border-bottom: 1px solid #D9D9D9;
    border-left: 1px solid #D9D9D9;
    border-right: 1px solid #D9D9D9;
    margin-bottom: 14px;
    padding: 10px 18px 5px;
}

結果は次のとおりです。

CSS/HTMLの結果

これは、使用されるほとんどすべてのウィジェットに最適です。ただし、上記の画像をサイドボックスの上部の青い線や境界線なしでサイドバーに表示したいと思います。>記号を使用して前後を識別するために特定のCSS記号を使用する方法があることは知っていますが、ここでそれを使用する方法や、それが機能するかどうかはわかりません。

どんな助けでも常にありがたいです。ありがとうございました！

4

1 に答える 1

3

問題の再現

わかりました、この JSFiddle demoであなたのイメージを複製しようとしました。JSFiddle がダウンしている場合、これは次のようになります。

レプリケーションのイメージ例

このために、 abackground-imageと 4px heightonを使用する代わりに.sidebox-top、単純に4px を使用しましたborder-top。同一の複製ではありませんが、これは同じ基本的な効果を実現します。

.sidebox-top要素を隠す

ステップ1

まず、.textwidgetディバイダ内に含まれる最初の子をターゲットにする必要がありますimg。imgその後、このスタイリングを他の要素に適用したくimgありません。また、コンテナー内の最初の要素でない場合は、スタイリングを適用したくありません。これを行うには、次を使用できます。

.textwidget img:first-child { ... }

ステップ2

.sidebox次のステップは、上のパディングと の高さの合計に等しい、画像の上パディングと負の上余白を与えることです.sidebox-top。次に、ウィジェットの背景と同じ色の背景を画像に付けたいと思います:*

.textwidget img:first-child {
    background: #fff;
    padding-top:14px;
    margin-top: -14px;
}

* 注: これは、ウィジェットの背景がウィジェットのコンテナーの背景と同じであり、背景が単色であることを前提としています。background-positionそうでない場合は、パターン化された背景をウィジェットの背景に揃えるためにいろいろ試してみる必要があります。

これから、画像が開始位置と同じ位置に留まりながら、上部の境界線に重なる画像になります。

ステップ 2 図

ステップ 3

3 番目のステップは、全体をカバーすること.sidebox-topです。これを行うには、選択imgした左右のパディングと負の左右のマージンを、 の左右のパディング.sideboxとその境界幅の合計に等しくする必要があります。

.textwidget img:first-child {
    ... /* Styling from Step 2 */

    padding-left: 18px;
    padding-right: 18px;
    margin-left: -19px;
    margin-right: -19px;
}

ステップ 3 図

ステップ 4

ステップ 3 は確かに の全体.sidebox-topをカバーしていますが、 の境界もカバーしています.sidebox。これを行うには、選択したものに同一の境界線を追加し、これを可能にするためにimg左右のパディングを減らす必要があります。img

.textwidget img:first-child {
    ... /* Styling from Step 2 */

    padding-left: 17px;
    padding-right: 17px;

    ... /* Margins from Step 3 */

    border-left: 1px solid #D9D9D9;
    border-right: 1px solid #D9D9D9;
}

ステップ 4 図

最終段階

最後のステップは、上部の境界線を追加してimg、ウィジェットの境界線を完成させることです。ステップ 4 と同様に、このためには、この境界線を考慮して上部パディングのサイズを縮小する必要があります。

.textwidget img:first-child {
    ... /* Styling from previous steps */

    padding-top: 13px;
    border-top: 1px solid #D9D9D9;
}

最終結果

最終的な JSFiddle デモ。

于 2013-10-24T12:10:40.767 に答える