html - 基础柱布局未按预期运行

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 个产品 block ，正如您在下面看到的那样，其中一些非常错位。

试图找出为什么它变成 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

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

如果有帮助，请告诉我!