Question

我有一些代码：

<div class="large-12 columns">
  <div class="row">
<% @just_products.each do |i| %>
  <% just_names = i['Name'] %>
  <% just_prices = i['UnitPrice'] %>
  <% just_descriptions = i['Description'] %>
    <div class="large-3 columns panel radius"><h2><%=h just_names %></h2><br><h3><%=h just_prices %></h3><br>
    <p><%=h just_descriptions %></p></div>
  <% end %>
</div>

输出不是我想象的那样。我要在每行中使用4个产品块，如下所示，其中一些产品块非常不对齐。 Foundation error http://i42.tinypic.com/2gxhc3q.jpg

试图弄清楚为什么它变成4 x 4 x 2 x 4 x 1 x 4 x 4 x 2而不是4 x 4 x 4 x 4 x 4 x 4 x 1

Answer 1

如果您使用可变高度列，网格将始终采用这种方式，如果您希望这些列只是互相捕捉，那么您应该使用名为isotope的jQuery插件

Answer 2

您需要为产品列设置固定高度，否则浮动元素将捕获另一个更高的元素或将它们全部清除。您可能需要结帐 http://cssdeck.com/labs/css-only-pinterest-style-columns-layout 或 masonry

请告诉我这是否有帮助！

基础列布局不符合预期

2 个答案: