2

誰でもこれを理解するのを手伝ってもらえますか?

ここで例を見ることができます：

http://jsfiddle.net/zhsnj/3/

HTML:

<div class="rt-block">
    <div>
        <div>
            <div class="itemContainer">
                <span>Lorem ipsum dolor sit amet</span>
            </div>
            <div class="clr"></div>
        </div>
        <div class="k2Pagination">
        </div>
    </div>
</div>

CSS:

.rt-block {
    margin: 10px;
    padding: 15px;
    position:relative;
}

.itemContainer {float:left;}

.k2Pagination {
    margin: 24px 0 4px;
}

.clr {
    border: medium none;
    clear: both;
    display: block;
    float: none;
    height: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
}

Firefox では、「itemContainer」と周囲の「rt-block」の間に隙間があります。他のブラウザにはこれがありません。

これは、itemContainer の float:left を削除することと、k2 ページネーションのマージンを削除することの 2 つの方法で修正されます。できればどちらもやりたくないです。

助けてくれてありがとう

4

2 に答える 2

3

まず、これは Firefox で見たときの表示です。

ここに画像の説明を入力

1 つ多すぎると思います<div>。<div>Firefox で表示すると、最初の の後に余分なパディングが追加され<div class="rt-block">ます。私の推測では、フロートが行の下に浮かぶ原因となる改行が生成されline-height: 0ます。この div に追加すると問題が解決するという事実によって確認されているようです。

余分なものを削除できます<div>：

<div class="rt-block">
    <div>
        <div class="itemContainer">
            <span>Lorem ipsum dolor sit amet</span>
        </div>
        <div class="clr"></div>
    </div>
    <div class="k2Pagination">
    </div>
</div>

jsfiddle

または、最初の div の行の高さを 0 に設定できます。

.rt-block > div {
    line-height: 0;
}

jsfiddle

または、インライン ブロックにします。

.rt-block > div {
    display: inline-block;
}

jsfiddle

于 2013-07-18T15:26:46.890 に答える
0

Firefox で余分なスペースが必要な理由はわかりませんが、マージンの代わりにパディングを指定できます。

.k2Pagination {
padding: 24px 0 4px;}

これは簡単で、うまくいくかもしれません。

于 2013-07-18T15:45:07.400 に答える