0

jQuery Masonry を使用して WordPress ギャラリーを作成しようとしていますが、正しく表示されません。

これは私のコードです：

<style type="text/css">
#container {
}
.item {
  width: 200px;
  float: left;
  padding: 10px;
  margin: 10px;
  background: #D8D5D2;
  font-weight: 300;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="jquery.masonry.min.js"></script>

<script>
$(function(){
  $('#container').masonry({
    // options
    itemSelector : '.item',
    columnWidth : 240
  });
});
</script>

これはHTMLです：

<div id="container">

<div class="item"><img src="1.JPG" width="200" /></div>
<div class="item"><img src="2.JPG" width="200" /></div>
<div class="item"><img src="3.JPG" width="200" /></div>
<div class="item"><img src="4.JPG" width="200" /></div>

...
</div>

そして、これは出力です：

出力

私は何を間違っていますか？

4

3 に答える 3

0

私はずっと前にWordpressサイトでMasonryを使用しましたが、それはかなりうまくいきました。問題は、これが非常に昔であり、サイトがもう存在しないため、コードが何であるかわからないことです。CSSに以下を追加してみてください。

overflow:hidden;
于 2012-08-11T03:21:25.963 に答える
0

これは厄介だ。どうやら jquery.masonry.min.js はどこにも見つからず、フォルダーに追加した瞬間に完全に機能し始めました! 皆様の親切な提案に感謝します。

于 2012-08-11T03:54:06.250 に答える
-2

私がすぐに最初に目立ったのは、次の行でした。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

そのはず：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
于 2012-08-10T23:00:47.673 に答える