如何在两列高度相等的情况下安排动态生成的内容？

Question

嗨，下面是我得到的输出。 SPECIALTIES 是标题。让它在那里。

我需要在标题SPECIALTIES 之后出现的内容排列在2列中。

我使用过http://masonry.desandro.com/。当我在XSLT上开发页面时，我无法使用在砌体上表示的HTML初始化。使用Javascript初始化时，该功能仅适用于第一部分，仅适用于 SPECIALTIES 下的内容。我在一个页面中有更多部分，例如 SPECIALTIES 。

有人想知道输出如下图所示吗？

更新：我已经尝试过jquery初始化，只有当我检查网页时它才适用于所有人：

这是代码：

<div class="MenuItemListDesc">
    <div class="MenuListItem">
      <h4>Ranch One Classic</h4>
      <p>Flame-grilled chicken, dressed mixed greena and roastedred pepper sauce on a toasted hoagie roll</p>
    </div>
    <div class="MenuListItem">
      <h4>Grilled Chicken & Cheese</h4>
    </div>
    <div class="MenuListItem">
      <h4>Spice Grilled Chicken</h4>
    </div>
    <div class="MenuListItem">
      <h4>Grilled Chicken Philly</h4>
      <p>Flame-grilled chicken, mozzarella, sauteed peppers and onions on a toasted hoagie roll</p>
    </div>
    <div class="MenuListItem">
      <h4>Teriyaki Chicken Sandwich</h4>
      <p>Flame-grilled chicken, grilled pineapple, lettuce and sweet teriyaki sauce on a toasted hoagie roll</p>
    </div>
    <div class="MenuListItem">
      <h4>Crispy Chicken Sandwich</h4>
      <p>Season, breaded chicken, romaine, tomatoes and mayonnaise ona toasted hoagie roll</p>
    </div>
    <div class="MenuListItem">
      <h4>Grilled Chicken Club</h4>
    </div>
  </div>

JQUERY INITIALIZATION：

var $container = $('.MenuItemListDesc');
// initialize
$container.masonry({
  columnWidth: 460,
  itemSelector: '.MenuListItem'
});

这是我的页面：http://stage.ranchone.com/menu/index-revised.html

您可以在每个部分的查看项目链接中找到它 感谢

Answer 1

您可以使用column-count CSS属性

.MenuItemListDesc {
   -webkit-column-count:2; 
   -moz-column-count:2; 
   column-count:2; 
}

演示：http://jsfiddle.net/LRvzC/