css - 基础文本网格

Question

我正在尝试创建一个包含文本而非图像的网格，类似于 Zurb 模板中的“内容部分”:http://foundation.zurb.com/templates/orbit.html

我想在每一行上创建三个文本 block 。

我能够创建它，但出现的问题是有时在我的数据中一行只有一个或两个文本 block 。

例如，如果产品缺少它的位置，是否可以通过移动成分来代替位置，或者如果缺少类别和位置，可以将成分移动到类别位置？

我正在使用 Ruby on Rails 和 Foundation 5。

谢谢!

  <div class="row">
    <div class="large-4 columns">
      <% unless @product.category.nil? %>
      <div class="product-heading">Product Category</div>
      <div class="product-value">
        <%= @product.category %>
      </div>
      <% end %>
    </div>

    <div class="large-4 columns">
      <% unless @product.location.nil? %>
      <div class="product-heading">Product Location</div>
      <div class="product-value">
        <%= @product.location.sort.join(", ") %>
      </div>
      <% end %>
    </div>

    <div class="large-4 columns">
      <% unless @product.ingredients.nil? %>
      <div class="product-heading">Product Ingredients</div>
      <div class="product-value">
        <%= @product.ingredients.sort.join(", ") %>
      </div>
      <% end %>
    </div>
  </div>

根据 Max Williams 的建议生成的 HTML。

  <div class="row">
    <div class="large-4 columns">
      <div class="product-heading">Product Category</div>
      <div class="product-value">Food </div>
    </div>
    <div class="large-4 columns">
      <div class="product-heading">Product Ingredients</div>
      <div class="product-value">Flour, Sugar </div>
    </div>
  </div>

Javascript 尝试删除空的 li 标签

<script>$('li, p')
  .filter(function() {
    return $.trim($(this).text()) === '' && $(this).children().length == 0
  })
  .remove();
</script>

Answer 1

关键是寻找重复的元素，并将它们抽象出来，例如使用循环。例如

<% product_cells = [["Category", @product.category], ["Location", @product.location_string], ["Ingredients", @product.ingredients_string]] %>
<div class="row">
  <% product_cells.each do |title, data| %>
    <% unless data.blank? %>    
      <div class="large-4 columns">
        <div class="product-heading">Product <%= title %></div>
        <div class="product-value"><%= data %> </div>
      </div>
    <% end %>
  <% end %>
</div>

请注意，我已将测试放在不同的位置，因此如果数据为空，则会跳过整个 large-4 div。

这种事情 @product.location.sort.join(", ") 通常应该用 Product 模型中的方法替换，例如

#in Product
def location_string
  self.location.reject(&:blank?).sort.join(", ")
end

def ingredients_string
  self.ingredients.reject(&:blank?).sort.join(", ")
end

那么你可以把上面的代码改成

<% product_cells = [["Category", @product.category], ["Location", @product.location_string], ["Ingredients", @product.ingredients_string]] %>

编辑:更改字符串方法以应对 nils

EDIT2:更改我原来的答案以使用我添加的模型方法。