網格系統額外空間右側

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屬性，右側的較大間隙。 通過遵循top，left屬性，按照其應用的類別放置所有容器。

好吧-您需要完全更改樣式表，以一次性修復它。 首先-設置容器的寬度，將其全部放置為1000px，然后，通過設置position和left，top屬性來放置子容器（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'
    });

});

工作演示