使用 Masonry布局库,我创建了一个两列布局,您可以在 codepen 上看到它.在布局的右侧可以看到一个额外的空间。谁能告诉我如何摆脱它?
// external js: masonry.pkgd.js
$('.grid').masonry({
itemSelector: '.grid-item',
gutter: 4,
columnWidth: '.grid-sizer',
// percentPosition: true
});
* { box-sizing: border-box; }
body { font-family: sans-serif; }
/* ---- grid ---- */
.grid {
background: #EEE;
max-width: 1200px;
}
/* clearfix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- grid-item ---- */
.grid-sizer,
.grid-item {
width: 48%;
height: 120px;
float: left;
/* vertical gutter */
margin-bottom: 10px;
background: #D26;
border-radius: 5px;
}
.grid-item--height2 { height: 200px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 360px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>
<h1>Masonry - gutter, margin bottom</h1>
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--height4"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
</div>
最佳答案
我用calc填充网格作为引用
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
// external js: masonry.pkgd.js
$('.grid').masonry({
itemSelector: '.grid-item',
gutter: 4,
columnWidth: '.grid-sizer',
// percentPosition: true
});
* { box-sizing: border-box; }
body { font-family: sans-serif; }
/* ---- grid ---- */
.grid {
background: #EEE;
max-width: 1200px;
}
/* clearfix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- grid-item ---- */
.grid-sizer,
.grid-item {
width: calc(50% - 2px);
height: 120px;
float: left;
/* vertical gutter */
margin-bottom: 10px;
background: #D26;
border-radius: 5px;
}
.grid-item--height2 { height: 200px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 360px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>
<h1>Masonry - gutter, margin bottom</h1>
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--height4"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
</div>
关于javascript - 如何去除砖石布局右边距的多余空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49153013/