當連續有多個div時，如何避免將最後一行排列在最高div的底部？

我在文檔中有一堆div，每個div的寬度是32％，但它們的高度不一樣。當連續有多個div時，如何避免將最後一行排列在最高div的底部？

CSS：

 body{ 
      text-align: center; 
     } 
     div{ 
      vertical-align: top; 
      display:inline-block; 
      border-style:solid; 
      width:32%; 
     } 
     .a{ 
      background-color: lightcoral; 
      height:200px; 
     } 
     .b{ 
      background-color: lightseagreen; 
      height:500px; 
     }

HTML：

<body> 
    <div class="a"></div> 
    <div class="a"></div> 
    <div class="b"></div> 
    <div class="a"></div> 
    <div class="b"></div> 
    <div class="a"></div> 
    <div class="b"></div> 
    <div class="a"></div> 
    <div class="a"></div> 
</body>

的問題是，新的生產線開始時，上線的每個格被定位在相同的Y值，我需要他們是連續的，在上下隔間之間沒有空間。有沒有辦法做到這一點？

https://jsfiddle.net/pn3dz9fg/

來源

2015-04-05 Eduárdó

行之間沒有空間，你的意思是邊界？請詳細說明 – Downgoat 2015-04-05 20:05:41

你的意思是像一個「pinterest」佈局？ – hagope 2015-04-05 20:11:13

這是它現在的樣子： http://s17.postimg.org/naxpkvla7/problem.png ，它應該是這樣的： http://s9.postimg.org/xa588peen/solution.png – 2015-04-05 20:20:01

「pintrest」佈局我找到了一個解決方案： CSS：

 body{ 
      -webkit-column-count: 3; 
      -webkit-column-fill:auto; 
      text-align: center; 
     } 
     div{ 
      -webkit-column-break-inside: avoid; 
      vertical-align: top; 
      display:inline-block; 
      border-style:solid; 
      width:100%; 
     } 
     .a{ 
      background-color: lightcoral; 
      height:200px; 
     } 
     .b{ 
      background-color: lightseagreen; 
      height:500px; 
     }

https://jsfiddle.net/pn3dz9fg/3/ thx！

來源

2015-04-05 20:38:38

https://jsfiddle.net/yq4xubph/1/

也許你腦子裏沒有什麼，但你使用Google之後的想法

<body> 
     <div class='row'> 
     <div class="a"></div> 
     <div class="a"></div> 
     <div class="b"></div> 
     <div class="a"></div> 
     <div class="b"></div> 
     </div> 
     <div class ='row'> 
     <div class="a"></div> 
     <div class="b"></div> 
     <div class="a"></div> 
     <div class="a"></div> 
     </div> 

    </body> 

body{ 
       text-align: center; 
       display:inline-block; 
       width:100%; 
      } 
      .a,.b{ 
       vertical-align: top; 
       display:block; 
       border-style:solid; 


      } 
      .row{ 
       width:32%; 
       vertical-align: top;      
       display:inline-block;    
      } 

      .a{ 
       background-color: lightcoral; 
       height:200px; 
      } 
      .b{ 
       background-color: lightseagreen; 
       height:500px; 
      }

來源

2015-04-05 20:36:45

當連續有多個div時，如何避免將最後一行排列在最高div的底部？

回答

相關問題