Question

我在我的网站上使用Bootstrap和Masonry插件。在顶部，我有一个Bootstrap的酒吧，然后有一个Masonry插件的盒子。问题是Masonry插件是最顶层的。我给了它margin-top:50但是它给出了一个水平滚动条。

这是代码＆amp;演示：JSFiddle

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* inherit height from window */
 html, body {
    height: 100%;
}
body {
    font-family: sans-serif;
}
/* ---- isotope ---- */
 .isotope {
    background: #DDD;
    height: 100%;
    /* inherit height from body */
}
/* clear fix */
 .isotope:after {
    content:'';
    display: block;
    clear: both;
}

如果您查看演示，则第一个框中有一个图像，并显示中间框位于顶部栏下方。中间div必须有100％的高度，以确保Masonry插件正常工作。那么如何避免顶部和底部div与中间div重叠？

提前致谢。

Answer 1

我更改了一些类属性。尝试更改并查看。

.isotope {
    z-index:100000;
    background: #DDD;
    height: 80%;
    /* inherit height from body */
    top: 45px;
}

.item.height2 {
    height: 263px;
}

这是JSFiddle DEMO。

如何定位一个又一个的盒子？

1 个答案: