我正在尝试使用jquery砌体制作网格系统。但我有空间问题。
我从codepen.io
创建了 DEMO如果您使用的是宽屏电脑,请缩小浏览器范围。当您缩小浏览器范围时,右侧会出现很大的差距。任何人都可以帮我解决这个问题吗?
HTML
<div class="kesif-wrp">
<div class="kesif-alani">
<div class="kesif-gonderiler">
<div class="posts-holder">
<div class="kesif-gonderi-alani" style="height:300px;">1</div>
<div class="kesif-gonderi-alani" style="height:400px;">2</div>
<div class="kesif-gonderi-alani" style="height:400px;">3</div>
<div class="kesif-gonderi-alani" style="height:200px;">s4</div>
<div class="kesif-gonderi-alani" style="height:250px;">5</div>
<div class="kesif-gonderi-alani" style="height:150px;">6</div>
<div class="kesif-gonderi-alani" style="height:200px;">7</div>
</div>
</div>
</div>
</div>
CSS
body {
background-color:#323949;
font-family: 'mstfont' !important;
margin: 0px ;
padding: 0px;
min-width:100%;
float:left;
height: 100%;
-webkit-font-smoothing: antialiased;
}
.kesif-wrp {
padding: 53px 0 0;
width: 100%;
position: relative;
background-color:blue;
}
.kesif-alani {
padding: 20px 0 50px;
margin: 36px auto 0;
position: relative;
max-width: 1620px;
min-width: 960px;
}
.kesif-gonderiler {
color: #444;
padding: 0 10px;
background-color:red;
}
.kesif-gonderi-alani{
width:300px;
background-color:#ffffff;
border-radius:3px;
-webkit-border-radius:3px;
-o-border-radius:3px;
-moz-border-radius:3px;
margin-right:20px;
margin-bottom:20px;
position: absolute;
top: 0px;
left: 0px;
}
.posts-holder {
box-sizing: border-box;
margin: 10px auto;
opacity: 1;
-webkit-transition: opacity 200ms;
-moz-transition: opacity 200ms;
transition: opacity 200ms;
}
答案 0 :(得分:0)
由于position : absolute
和top,left
css属性,因此存在较大差距。按照顶部左侧属性,按照应用的类放置所有容器。
嗯 - 您需要完全更改样式表以便一劳永逸地修复它。 首先 - 设置容器的宽度,你想把它们全部放在1000px然后,通过设置位置和左,顶部属性放置子容器(div)。如果您需要响应式设计,请转到媒体查询。
希望这会有所帮助..
答案 1 :(得分:0)
我解决了这个问题如下。
CSS:
.kesif-wrp {
padding: 53px 0 0;
width: 100%;
position: relative;
}
.kesif-alani {
padding: 20px 0 50px;
margin: 36px auto 0;
position: relative;
max-width: 1620px;
min-width: 960px;
}
.kesif-gonderiler {
color: #444;
}
.kesif-gonderi-alani{
width:300px;
background-color:#ffffff;
border-radius:3px;
-webkit-border-radius:3px;
-o-border-radius:3px;
-moz-border-radius:3px;
margin:10px;
}
.posts-holder {
position:relative;
margin: 10px auto;
}
的JavaScript
$( function() {
var $container = $('.posts-holder');
$container.masonry({
isFitWidth: true,
itemSelector: '.kesif-gonderi-alani'
});
});
正在使用 DEMO