Question

我正在尝试使用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;
}

Answer 1

由于position : absolute和top,left css属性，因此存在较大差距。按照顶部左侧属性，按照应用的类放置所有容器。

嗯 - 您需要完全更改样式表以便一劳永逸地修复它。首先 - 设置容器的宽度，你想把它们全部放在1000px然后，通过设置位置和左，顶部属性放置子容器（div）。如果您需要响应式设计，请转到媒体查询。

希望这会有所帮助..

Answer 2

我解决了这个问题如下。

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

网格系统额外空间右侧

2 个答案: