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

Question

您好，下面是我得到的输出。 SPECIALITIES 是标题。让它在那里。

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

我用过http://masonry.desandro.com/ .当我在 XSLT 上开发页面时，我无法使用代表 masonry 的 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 初始化:

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

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

您可以在每个部分的VIEW ITEM 链接中找到它谢谢

Answer 1

您可以使用 column-count CSS 属性

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

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