2

我是电子商务网站中我的产品显示页面的这个 html，但是对齐有一些问题....在这个页面中将接近 100 个产品，所以我需要像矩阵一样显示它

<div  style=" margin: 0 auto; width:640px; text-align: left">
     <div class="leftcol" >left column 1
           <p>my text</p>
           <p>my text</p>
     </div>
     <div class="leftcol" >right column
           <p>my textmy text my text my text</p>
     </div>   
     <div class="leftcol" >left column
           <p>my text</p>
           <p>my text</p>
           <p>my text</p>
           <p>my text</p>
           <p>my text</p>
     </div>
     <div class="leftcol" >right column
          <p>my textmy text my text my text</p>
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
     </div>
     <div class="leftcol" >
           left column 2
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
    </div>

我的 CSS

.leftcol{width: 200px;background:yellow;margin-right:10px;float:left; }

所有产品 div 的大小都相同200px，但是 div 的高度会像示例一样发生变化，我需要像这样 http://pinterest.com/显示 div

显示器是这样的

在此处输入图像描述

但我需要通过下一个 div 示例来填补这些空白，请参阅此站点 [http://pinterest.com/][1] http://pinterest.com/

4

3 回答 3

1

masonry 和 pinterest 都使用绝对定位来实现您所需要的。而且我猜这对于您也具有响应能力的复杂布局来说是必须的。

但是对于一个简单的固定宽度，我可能会这样做：

<ul id="matte">
   <ul id="first-col">

      <ul class="product-cat">
         <li>...</li>
         <li>...</li>
         ...
      </ul>

      <ul class="product-cat">
         <li>...</li>
         <li>...</li>
         ...
      </ul>

   </ul>

   <ul id="second-col">

      <ul class="product-cat">
         <li>...</li>
         <li>...</li>
         ...
      </ul>

      <ul class="product-cat">
         <li>...</li>
         <li>...</li>
         ...
      </ul>

   </ul>


   <ul id="third-col">

      <ul class="product-cat">
         <li>...</li>
         <li>...</li>
         ...
      </ul>

      <ul class="product-cat">
         <li>...</li>
         <li>...</li>
         ...
      </ul>

   </ul>
</ul>

所以，这背后的想法是把布局分成列，根据最短的列添加内容，而不是在js中计算整个布局。这甚至可以与用户生成的内容一起使用我猜你在哪里检测到最短并相应地注入内容

于 2012-04-26T12:34:46.537 回答
1

几乎类似于获得固定高度的 div 以继续下一行。

根据您的要求，这应该匹配：http: //jsfiddle.net/bXvaj/

于 2012-04-26T10:12:07.293 回答
0

最后，来自数据库的 div 内容无法仅使用 CSS 对齐矩阵。所以我们想使用 jQuery 我在评论中使用“@Gaby aka G. Petrioli”回答

使用masonry.desandro.com或isotope.metafizzy.co

于 2012-09-03T15:35:59.777 回答