1

ラッパーdiv内に3つのdivがあります。ラッパーdiv内で、左端のdivは、jsを使用してスライダー間を移動するために使用している矢印画像です。中央のdivはスライダーで、右のdivは次のスライダーに移動するための右矢印です。

スライダーのコードは次のとおりです。

<div class="twocol_double">
    <div class="btn_left"></div>
    <div id="slide_wrapper">
        <div class="slide" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 3; opacity: 1;">

            <h3>Heading1</h3>

            <p>“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in vol</p>
        </div>
    </div>
    <div class="btn_right"></div>
</div>

複数のslideクラスがありますが、質問のために1つだけ追加しました。

しかし、何らかの理由で、右矢印の付いた右divが押し下げられています。Chromes要素インスペクターでそれを見ると、スライダーdivに50pxの右マージンがあり、どこにも定義していません（オレンジ色が表示されていますが、CSSマークアップはありません）。

ここでjsfilddeの問題を再現しました：http： //jsfiddle.net/maZbF/1/

その右矢印を他の2つのdivと揃えたい。私はこれを理解し、無駄にクロムでデバッグしようとして脳を破壊しました。私は何か簡単なものが欠けていますか？

4

2 に答える 2

5

フロートコンテンツを同じ行に保持するには、通常のコンテンツの前にすべてのフロートコンテンツを定義する必要があります。

この場合、左ボタンを最初に左にフロートさせます。これは、最初だったために機能します。次に、フロートされていない分割がありますdisplay: block。ブロックレベルの要素は、幅を定義した場合でも、それ以降は常に次の行にプッシュされます。したがって、その後右ボタンに到達すると、新しい行から始まり、その新しい行の右側に浮かんでいます。それ以前の分割には定義が設定されているため、上から131pxで開始しますheight: 131px（その中の他のコンテンツは境界を越えてオー​​バーフローし、右に浮かぶ要素に干渉しません）。

したがって、いくつかのオプションがあります。

  1. 左ボタンの直後に右ボタンを定義します。

  2. 3つの要素すべてを左側に浮かせて、互いに積み重なるようにします。

于 2013-02-15T20:30:28.470 に答える
2

あなたが抱えている問題は、右のdivがposition:relative左のdivであるということだと思いますposition:absolute。ただし、単純なフロートを使用してこのレイアウトを単純化できると思います。

HTML

    <div class="twocol_double">
    <div class="btn_left"></div>
    <div id="slide_wrapper">
        <div class="slide">
            <h3>Heading1</h3>
            <p>“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in vol</p>
        </div>
    </div>
    <div class="btn_right"></div>
</div>

CSS

.twocol_double {
    width: 500px;
    float: left;
    font-size: 1.2em;
}
.btn_left {
    cursor: pointer;
    display: block;
    width: 20px;
    height: 170px;
    float: left;
    background: #ccc url("http://i.imgur.com/7bYsZJD.gif") no-repeat center center;
}
#slide_wrapper {
    width: 460px;
    height: 131px;
    display: block;
    float:left;
}
.btn_right {
    cursor: pointer;
    width: 20px;
    height: 170px;
    float: right;
    background: #ccc url("http://i.imgur.com/0QRkQ2M.gif") no-repeat center center;
}
h3 {
    font-size: 1.5em;
    color: #7DAC20;
}
p, blockquote {
    padding-bottom: 20px;
    font-size: 1.3em;
    color: #636B75;
    line-height: 20px;
}

http://jsfiddle.net/Eb3TA/

于 2013-02-15T20:28:55.207 に答える