text-align:justifyを使用して、インラインブロック要素の間隔を均等にします。私はjQueryを使用して特定の要素を入れ替えて、それらがより適切にフィットするようにしています(たとえば、行をより効率的に埋めます)。ただし、ブラウザはスワップされた要素を正しく正当化できなくなりました。この問題を克服するためにブラウザに要素を再調整させる方法はありますか?
編集 これは問題を示すjsfiddleです:http://jsfiddle.net/sprintstar/HKDd9/3/
text-align:justifyを使用して、インラインブロック要素の間隔を均等にします。私はjQueryを使用して特定の要素を入れ替えて、それらがより適切にフィットするようにしています(たとえば、行をより効率的に埋めます)。ただし、ブラウザはスワップされた要素を正しく正当化できなくなりました。この問題を克服するためにブラウザに要素を再調整させる方法はありますか?
編集 これは問題を示すjsfiddleです:http://jsfiddle.net/sprintstar/HKDd9/3/
問題は、インライン ブロック要素間のスペースの欠落にあります。あなたが見逃しているのはテキストノードです:
$(function() {
var eq3 = $('.container a:eq(3)');
var eq4 = $('.container a:eq(4)');
eq4.before(eq3).before(" ");
});
コードが意図したとおりに機能しない理由はわかりませんが、解決策はあります。たぶん誰かがこの問題に光を当てることができるでしょう。
まず第一にeq4.before(eq3);
、あなたがそれを選んだ場所に戻すことを意味します。私はあなたが意味したと信じていますeq4.insertBefore(eq3);
新しい要素を追加してみましたが、完全に機能しました
$('<a href="#" class="sq-1"><img src="http://placehold.it/64x32" /></a>').insertBefore(eq3);
編集:しかし、同じ要素のクローンを作成しても同じ結果は得られません。
eq4.clone().insertBefore(eq3);
eq4.remove();