横幅是我想要的地方,尽管使用 jquery masonry 的框重叠了它,我在这里做错了什么?...
html
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="masonry.js"></script>
<script>
$(function () {
$('#container').masonry({
columnWidth: 1,
itemSelector: 'div'
});
});
</script>
<div id="banner">
<img src="images/banner.png"/>
</div>
<div id="logo">
</div>
<div id="imagetrans">
<div id="container" class="clearfix masonry">
<div class="box1">
<img class="bottom" src="images/eventbox2.png"/>
<img class="top" src="images/eventbox.png"/>
</img></div>
<div class="box2">
<img class="bottom" src="images/forumbox2.png"/>
<img class="top" src="images/forumbox.png"/>
</img></div>
<div class="box1">
<img class="bottom" src="images/eventbox2.png"/>
<img class="top" src="images/eventbox.png"/>
</img></div>
<div class="box1">
<img class="bottom" src="images/eventbox2.png"/>
<img class="top" src="images/eventbox.png"/>
</img></div>
<div class="box3">
<img class="bottom" src="images/top10box2.png"/>
<img class="top" src="images/top10box.png"/>
</img></div>
<div class="box1">
<img class="bottom" src="images/eventbox2.png"/>
<img class="top" src="images/eventbox.png"/>
</img></div>
</div>
</div>
</div>
和CSS
body {
width:900px;
height:100%;
margin:0 auto;
background-image: url(images/gridbg.png);
}
#banner {
position: absolute;
left: 0;
right: 0;
top: 0px;
}
#container > div {
margin: 5px;
}
.box1 {
width:350px;
height:250px;
}
.box2 {
width:150px;
height:150px;
}
.box3 {
width:150px;
height:350px;
}
#imagetrans {
position:relative;
margin:0 auto;
}
#imagetrans img.top:hover,
#container > div img.top:hover {
opacity:0;
}
#imagetrans img,
#container > div img {
position:absolute;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
有任何想法吗?因为我可以通过从上到下更改编码轻松地将横幅放置在底部,尽管如果我可以将它放在屏幕顶部,我会更喜欢它,但不太确定有什么问题......