Question

我是电子商务网站中我的产品显示页面的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的高度会发生变化，例如，我需要显示div like this http://pinterest.com/

显示就像这样

enter image description here

but i need to fill that gaps by next divs example see this site [http://pinterest.com/][1] http://pinterest.com/

Answer 1

砌体和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计算整个布局。这甚至可以与用户生成的内容一起使用，我猜你在哪里检测到最短并相应地注入内容

Answer 2

几乎与getting fixed height div to continue on next line相似。

根据您的要求，这应符合：http://jsfiddle.net/bXvaj/

Answer 3

最后来自数据库的div内容不能仅使用CSS来对齐矩阵。所以我们想要使用jQuery，我会在评论

中使用“@Gaby aka G. Petrioli”回答

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

使用css的Div矩阵结构

3 个答案: