2

私は妻のためにウェブページをまとめる作業をしていますが、CSSの問題に遭遇しました。周りに空白を入れたくない画像スライダー（RoyalSlider）がありますが、スライダーdivの前にネストされたさまざまなdivによって、パディング、マージン、および境界線が追加されます。クラスとクラス内のフォーマットはページ上の複数の場所で使用されているため、ページの他の要素を壊さずに各要素を単純に変更することはできません。PHPをいじらずにこれを行うことをお勧めします。

これがフォーマットを引き起こしているdivであり、それらがどのようにネストされているかを表すためにタブで囲まれています。各divの下にはdivのCSSフォーマットがあります。

<div class="container">
    #section-content .container {
        padding-top: 20px;
    }

    #section-content .container {
        border-left: 10px solid white;
        border-right: 10px solid white;
    }

        <div class="eleven columns content sixteen no-thumbnail">
            .content {
                padding: 10px 0 0;
            }

            .column, .columns {
                float: left;
                display: inline;
                margin-left: 10px;
                margin-right: 10px;
            }

                <div class="the_content post type-post hentry excerpt clearfix">
                    .content .hentry {
                        padding-bottom: 15px;
                    }

                    <div class="royalSlider">
                        <div class="rsOverflow">
                            <div class="rsContainer">

たくさんの>（または何か...私のCSSスキルは初歩的です）で何かを行うことができ、royalSlider divが存在するときに他のすべてのルールをオーバーライドすることを指定できると思いましたが、方法がわかりませんそれをするために。

ページのURLは次のとおりです。

http://rachelhappen.com/high-res-royal-test-post/

これは、現在の状態、私がどのようになりたいか、CSSがフォーマットする方法の色分けされたグラフィックを示す写真です。

ウェブページの画像
（出典：rachelhappen.com）

どんな助けでも大歓迎です。

4

2 に答える 2

1

クラス階層を試すことができます。私はそれroyalSliderが間違いなくそこにあると思います、そしてあなたはそれのために意図されたルールを指定するためにその階層を使用することを試みることができます。

例

あなたが試すことができます

.container .royalSlider{
/* rules here */
}

それが役に立てば幸い。

[編集]：つまり、問題はパディングが親にあるため、問題になります。

問題

回避策==>コンテナで同じ背景色を試してください-空白を非表示にします。完璧な解決策ではありません-回避策だけです。画像を中央に配置したい場合は適していません

于 2013-01-19T20:28:54.317 に答える
0

画像にIDを付け、そのパディングを0、0、0、0に設定します。画像の下にまだ空白がある場合は、display属性をブロックします。

于 2013-01-19T19:53:07.827 に答える