Question

我尝试使用this jquery网格插件，但它不能使用我的布局。图像堆叠在一起，它们似乎从.main溢出，并且它们与页脚重叠。救命？：C

＆＃13;

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%; }

＆＃13;

<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>

＆＃13;

Answer 1

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

同时尝试.reset()方法。

定位的div从容器中溢出

1 个答案: