1

JQuery Masonry グリッドがタイトルと重なっています。

<div name="top" id="container">
    <h2>Title</h2>
    <div class="item">
        <h3>1</h3>
        <p></p>
    </div>
    <div class="item">
        <h3>2</h3>
        <p></p>
        <p></p>
    </div>
    <div class="item">
        <h3>3</h3>
        <p></p>
    </div>
    <div class="item">
        <h3>4</h3>
        <p></p>
        <p></p>
    </div>
    <div class="item">
        <h3>5</h3>
        <p></p>
    </div>
</div>

私のCSS：

#container {
position:relative;
left:28%;
width:69%;
}

.item {
width:200px;
float:left;
background: #fff;
}

ヘッド セクション:

<!--Jquery functions-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/jquery.masonry.min.js"></script>
<script type="text/javascript">    // This block will be put in a separate file later on (JQuery.js)
$(document).ready(function() {
   var $container = $('#container');            
   //$container.imagesLoaded(function(){                    
      $container.masonry({
         itemSelector: '.item',
         isAnimated: true,
      });
   //});
});
</script>
// ...
<?php wp_head(); ?>
</head>

タイトルは常に div の前に置く必要がありますか? このような：

<h2>Title</h2>
<div name="top" id="container">

または、タイトルの CSS に何か不足していますか?

h2 {
color:#751D24;
font:5em 'open sans', sans-serif;
font-weight:bold;
letter-spacing:-.05em;
line-height:.5em;
margin:3.5% 0 2%;
text-shadow:1px 1px 1px #fff;
}

基本的に、最善の解決策は何でしょうか？

4

1 に答える 1

2

#containerMasonry プラグインは、指定したコンテナー内の要素を絶対位置に配置するため、 からタイトルを削除する必要があり.itemます。

次のようにコードを変更できます。

HTML

<div name="top" id="container">
    <h2>Title</h2>

    <div id="masonry-container">
        <div class="item">
            <h3>1</h3>
            <p>text</p>
        </div>
    </div>
</div>

JQuery

var $container = $('#masonry-container');            
$container.imagesLoaded(function(){                    
    $container.masonry({
       itemSelector: '.item',
       isAnimated: true,
    });
});
于 2013-11-08T16:50:41.777 に答える