2

問題

clone()既存の div のセットに divを追加しようとしていて、奇妙な問題が発生しています。Div は、そのように div 間に余分なスペースを作成するようです。おそらくhtmlを再フォーマットすることによるハックがありますが、私は本当にそれをしたくありません.

ここに画像の説明を入力

これはコードです：

HTML

<div class="resources">
    <div class="template">
        <p>Hi <b>Bob</b></p>
    </div>
</div>

<div class="content">
    <div class="template">
        <p>Hi <b>Bob</b></p>
    </div><div class="template">
        <p>Hi <b>Mark</b></p>
    </div>
</div>

<button>Add Another Box</div>

CSS

.resources {
    display:none;
}

.template {
    display:inline-block;
    width:100px;
    height:100px;
    background-color:blue;
    margin:1px;
}

.content {background-color:red}

JQuery

$('button').on('click',function(){
    $('.resources .template').clone()
        .find('b').html("joe").end()
        .prependTo(".content");
});

JSFiddle - http://jsfiddle.net/7Kmex/1/

4

3 に答える 3

2

これはinline-block要素の一般的な問題です。要素間にスペースがある場合、要素間にスペースが表示されます。

これに対する一般的な修正font-sizeは、コンテナの を に設定すること0です。このようにして、スペースはスペースを占有しません。

.template {
    display:inline-block;
    width:100px;
    height:100px;
    background-color:blue;
    margin:1px;

    font-size: 8pt;
}

.content {
    background-color:red; 
    font-size: 0;
}

http://jsfiddle.net/7Kmex/5/

または、この特定の状況では、最初の div タグの前のスペースを削除するだけです。

<div class="content"><div class="template">
        <p>Hi <b>Bob</b></p>
    </div>

http://jsfiddle.net/7Kmex/6/

于 2013-05-11T22:28:22.343 に答える
1

.template最初の追加inline-block要素を追加した後も html 内のスペースが残り、 の間inline-blockのスペースがブラウザーによって 4px にレンダリングされるため、このように最初の前のスペースを削除する必要があります。

<div class="content"><div class="template">
        <p>Hi <b>Bob</b></p>
    </div><div class="template">
        <p>Hi <b>Mark</b></p>
    </div>
</div>

更新されたjsfiddle

于 2013-05-11T22:26:54.847 に答える