1

本当にこれで頭を叩いています。

私はアイソトープhttp://isotope.metafizzy.co/custom-layout-modes/centered-masonry.htmlを使用しています。

#containerが相対的に設定されており、上部のナビゲーションと非表示のサブナビゲーションが付いたヘッドがあります。ナビゲーションのリンクをクリックすると、サブナビゲーションが展開されます。罰金。私はボックスの相対にラッパーを設定しています。これらのボックスは絶対に同位体によって設定されています。

問題は、サブナビゲーションが展開されると、コンテンツは押し下げられますが、ボックスが切り取られることです。#containerはoverflow：hiddenを使用しており、表示することはできません。そうしないと、他の問題が発生します。私は非常に多くの解決策を試しましたが、それを理解することはできません。

4

2 に答える 2

0

同位体化されたコンテンツに対して間違ったラッパーを参照しています。この場合、並べ替えるコンテンツのコンテナを参照する必要があります.box-container（ここでvar $container = $('.box-container');。したがって、必要がないため、CSSから次のものを削除します。

#container {
    margin: 0 auto;  /* centering won't work without a solid width and not a restriction (min-width) */
    max-height: 100%; /* remove */
    min-height: 100%; /* remove */
    min-width: 930px;
    padding: 20px 5px 40px;
}

body {
    padding-bottom: 20px;
}
于 2012-02-06T19:45:34.690 に答える
0

私は最終的に#headを#containerから外し、jQueryで#headwidthと#headmarginsを#containerとして設定しました。これにより、ウィンドウのサイズ変更でも、サブナビゲーションが表示されたときに#containerを展開する必要がなくなりました。通常どおり#containerdivをプッシュします。

 $(function() {
   var myLeft = $("#container").offset().left;
   var newWidth = $("#container").innerWidth();
   var myRight = $(window).width() - ($("#container").offset().left + $("#container").outerWidth());
$("#head").animate({ width: newWidth, marginLeft: myLeft, marginRight: myRight }, "fast");
});

ありがとう

于 2012-02-08T12:18:00.000 に答える