반응 형 (?) 그리드 시스템

Question

this site을 찾으십시오. 보시다시피, 반응 형 그리드 시스템을 사용합니다. 그리드 흐름은 1920x1080 화면 크기와 1024x768에서 완벽하게 작동합니다.

내 웹 사이트에서는 똑같은 일을하고 싶지만 성공하지 못합니다. 이미 몇 가지 프레임 워크 (responsivegridsystem.com, foundation.zurb.com 및 gumbyframework.com)을 시도했지만 다시 성공하지 못했습니다.

더 구체적으로 말하면, "2 열"레이아웃이 있습니다. 왼쪽 열은 고정 너비이고 오른쪽 열은 다른 여러 열을 포함합니다. 1920 × 1080은 (완벽하게 작동)에

내 레이아웃을 따라

1280X1024 (원치 않는 공간)에서 내 레이아웃 :

그리고 마지막으로, 1024 내 레이아웃을 (다시 나는 부지런한 공간이있다) :

"원하지 않는 공백"대신에, 나는 이전에 통과 한 사이트처럼 모든 레이아웃을 중앙 집중화하고 싶습니다.

내 HTML :

이

<div class="wrap"> 
<div class="left-sidebar float-left"> 
    <div class="shopping-list"> 
    <div class="inside-padding-10"> 
     <div class="shopping-list-header"> 
      <h1>0</h1> 
      <p> 
       Produtos na sua lista de compras 
      </p> 
     </div> 
     <hr /> 
     <div class="shopping-list-body"> 
      <button>Calcular menores preços</button> 
     </div> 
    </div> 
    </div> 
    </div> 
    <div class="main float-right"> 
    <ul class="products-list section group"> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    </ul> 
    </div> 

는 CSS :

이

.wrap { 
    padding-right: 195px; 
    overflow: hidden; 
} 

.main { 
    margin: 0 -220px 0 auto; 
    width: 100%; 
} 

.main-content .left-sidebar { 
    width: 200px; 
} 

ul.products-list { 
    width: 100%; 
} 

ul.products-list li { 
    background-color: red; 
    width: 14.6em; 
    height: 300px; 
    margin-bottom: 5px; 
    float: left; 
} 

누군가가 나를 도울 수 있습니까?

Answer 1

콘솔을 사용한 빠른 재생이 $.fn.isotope - Isotope은 블록 레이아웃이 (다양한 자극에 맞게) 재 배열되도록하는 David de Sandro의 jQuery 플러그인입니다. DOM 검사기를 보면 요소에 예기치 않은 구조가 드러났지 만 여전히 기능상 가능성이있는 것처럼 보입니다.

편집 : 그냥 다시 DOM을 확인 - 그것은 참으로 동위 원소입니다 : $('[class*=isotope]').length>0 === true