具有不同高度塊的三列布局

我有基於Twitter Bootstrap的簡單3列布局。唯一的問題是，每根柱子都是由不同高度的塊拼裝而成。具有不同高度塊的三列布局

<div class="container"> 
    <div id="blocks" class="row"> 
     <div class="span4"> 
      <div class="block" id="block1"> 
      <div class="block" id="block4"> 
      <div class="block" id="block7"> 
     </div> 
     <div class="span4"> 
      <div class="block" id="block2"> 
      <div class="block" id="block5"> 
      <div class="block" id="block8"> 
     </div>    
     <div class="span4"> 
      <div class="block" id="block3"> 
      <div class="block" id="block5"> 
      <div class="block" id="block9"> 
     </div> 
    </div> 
</div>

This way 。

它工作得很好，除了小顯示器。然後塊的順序不排序。

On small displays

是否有某種方式來實現排序塊沒有任何JavaScript？

來源

2013-05-12 Tom Tichý

是不同的高度固定？換句話說，高度可以在CSS（或內聯樣式）中硬編碼，還是塊需要根據內容調整其大小？ – 2013-05-12 13:59:03

不，它基於內容。 – 2013-05-12 14:49:07

3列結構沒有辦法達到這種效果。如果塊的高度都一樣，那麼你可以漂浮：留下所有沒有列的塊，然後按順序包裝。由於他們是不一樣的大小，你將不得不使用JavaScript如磚石：

http://masonry.desandro.com/

來源

2013-05-12 13:01:13 Jackson

我試過避免使用JavaScript。但是，如果沒有其他方式...... – 2013-05-12 14:48:28

它會是相當困難的實現這一點，你可能會想玩弄與浮動單列表：離開;或顯示：inline-block;

或

你可以有2組用CSS裏面@media名單，所以取決於屏幕尺寸可以顯示或隱藏選定的div

CSS例如

@media screen and (min-width: 768px) and (max-width: 1024px) { 
.displayFullScreen {display: block;} 
.displayMobileScreen {display: none;} 
} 


@media screen and (max-width: 767px) { 
.displayFullScreen {display: none;} 
.displayMobileScreen {display: block;} 
}

來源

2013-05-13 10:48:05 Raver0124

具有不同高度塊的三列布局

回答

相關問題