右侧网格系统额外空间答案

【问题标题】：Grid system extra space right side右侧网格系统额外空间
【发布时间】：2015-02-21 17:22:26
【问题描述】：

我正在尝试使用 jquery masonry 制作网格系统。但我有空间问题。

我在 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;
}

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

由于position : absolute 和top,left css 属性，右侧的差距很大。所有容器都按照其应用的类按照 top,left 属性放置。

嗯 - 您需要彻底更改样式表才能一劳永逸地修复它。首先 - 将容器的宽度设置为您想要放置它们的位置，然后全部设置为 1000 像素，然后通过设置位置和左侧顶部属性来放置您的子容器（div）。如果您需要响应式设计，请选择媒体查询。

希望这会有所帮助..

【讨论】：

感谢您的回答，我找到了解决方案并回答了我的问题。

【解决方案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

【讨论】：

解决方案是什么？