0

看看这个网站。如您所见，它使用响应式网格系统。网格流在 1920x1080 和 1024x768 的屏幕尺寸上都能完美运行。

我想对我的网站做同样的事情，但没有成功。我已经尝试了一些框架（responsivegridsystem.com、foundation.zurb.com和gumbyframework.com）并且再次没有成功。

更具体地说，我有一个“2 列”布局。左列具有固定宽度，右列包含其他几列。

按照我的1920x1080布局（完美运行）： i.stack.imgur.com/sRBF6.jpg

我的1280x1024布局（不需要的空间）： 1280x1024 布局

最后，我的1024x768布局（我再次拥有未占用的空间）： 1024x768 布局

而不是“不需要的空间”，我想集中所有布局 - 就像我之前通过的网站一样。

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

有人能帮我吗？

4

1 回答 1

1

快速玩一下控制台就会发现$.fn.isotope——Isotope是David de Sandro的一个 jQuery 插件，它允许块布局响应式地重新排列（对各种刺激）。查看 DOM 检查器会发现元素上的意外结构，但它在功能上看起来仍然是可能的。

编辑：刚刚再次检查了 DOM——它确实是同位素：$('[class*=isotope]').length>0 === true

于 2013-06-03T15:45:04.600 回答