javascript - 如何将动态生成的内容排列在等高的两列中？

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>

查询初始化：

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/