0

横幅是我想要的地方，尽管使用 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;
}

有任何想法吗？因为我可以通过从上到下更改编码轻松地将横幅放置在底部，尽管如果我可以将它放在屏幕顶部，我会更喜欢它，但不太确定有什么问题......

在此处输入图像描述

4

1 回答 1

1

尝试改变：

#banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0px;
}

到：

#banner {
   height: 100px; // whatever your banner height is.
}

或者：

#banner {
  position: fixed;
  left: 0;
  right: 0;
  top: 0px;
}

如果您使用固定位置的方法，则需要添加某种上边距或某种间隔，以将页面内容降低标题的高度。

于 2013-04-01T19:22:24.850 回答