2

私はeコマースサイトの商品表示ページのこの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は同じサイズですが、divの高さは例のように変化します。この200pxように、divを表示する必要がありますhttp://pinterest.com/

ディスプレイはこんな感じ

ここに画像の説明を入力してください

しかし、次のdivの例でそのギャップを埋める必要があります。このサイト[http://pinterest.com/][1]http://pinterest.com/を参照してください。

4

3 に答える 3

1

次の行に進むために固定高さdivを取得するのとほぼ同じです。

要件については、これは次のように一致する必要があります：http: //jsfiddle.net/bXvaj/

于 2012-04-26T10:12:07.293 に答える
1

組積造とピンタレストはどちらも、絶対位置を使用して必要なものを実現します。そして、応答性もある複雑なレイアウトには必須だと思います。

しかし、単純な固定幅のものの場合、私はおそらくこれを行います：

<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 に答える
0

最後に、データベースのdivコンテンツは、CSSのみを使用してマトリックスを整列させることはできません。だから確かに私たちはjQueryを使いたいのですが、コメントで「@GabyakaG.Petrioli」の回答を使用します

masonry.desandro.comまたはisotope.metafizzy.coを使用します

于 2012-09-03T15:35:59.777 に答える