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

我有基于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

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

回答

相关问题