如何將動態生成的內容排列在高度相等的兩列中？

Question

您好以下是我得到的輸出。 專業是標題。 讓它在那里。

我需要將標題“ SPECIALTIES”之后出現的內容安排在2列中。

我已經使用了http://masonry.desandro.com/ 。 在XSLT上開發頁面時，我無法使用砌體上表示的HTML初始化。 使用Java腳本初始化時，此功能僅適用於第一部分，僅適用於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

您可以在每個部分的“ 查看項目”鏈接上找到它

Answer 1

您可以使用列數 CSS屬性

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

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