gpt4 book ai didi

html - 定位的 div 溢出容器

转载 作者:太空宇宙 更新时间:2023-11-04 11:47:57 25 4
gpt4 key购买 nike

我正在尝试使用 this jquery 网格插件,但它不适用于我的布局。图像彼此堆叠,它们似乎从 .main 溢出,并且与页脚重叠。帮助? :C

body {
padding: 0;
margin: 0;
color: $fontcolor;
background-color: #eee;
font: 100% 'Open Sans', sans-serif;
background-color: $main-bg;
width: 100%;
height: 100%;
}

.container {
margin: 0 auto;
width: 80%;
height: 100%;
}

.main {
width: 100%;
background-color: $content-bg;

}

.grid-container {
background-color: #F9F9F9;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
margin: 20px auto;
position: relative; }

.grid-item {
display: inline-block;
font-size: 0;
position: absolute;
}

.grid-item img {
cursor: pointer;
display: block;
width: 100%; }
<body>
<div class="container">
<div class="main">
<div class='grid-container'>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/short.jpg'>
</div>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/tall.jpg'>
</div>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/medium.jpg'>
</div>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/tall.jpg'>
</div>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/short.jpg'>
</div>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/medium.jpg'>
</div>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/medium.jpg'>
</div>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/short.jpg'>
</div>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/medium.jpg'>
</div>
</div>
</div>
</div>
</body>

最佳答案

确保您在 window load 中初始化 stackgrid。

也可以试试 .reset() 方法。

关于html - 定位的 div 溢出容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30826870/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com