Question

我正在使用Ruby on Rails 3.2构建一个在线商店，其中包含一个'do'循环，用于从DB中提取产品详细信息并将结果包装在Div中。问题是当多个产品被填充时，Div包装每个产品信息不是水平对齐的。我目前将Div设置为浮动 - 左侧将它们水平放置在彼此旁边，但是它们没有正确排列（右侧的每个div位置比它之前的位置略低。

我在下面提供了html和CSS代码。对此的任何帮助将不胜感激

HTML代码

<% @products.each do |product| %>  

<div class="Primary span 3">
<p id="offer-title"> <%= product.title %> </p>

<%= image_tag(product.image_url, :alt =>product.title, :width =>90, :height=>180)%>
        <hr />
        <div id="promo-header">
         <dl id="tier">
            <dt >Tier</dt>
            <dd class="tier-details tier1-style">1</dd>
            <dd class="tier-details tier2-style">2</dd>
            <dd class="tier-details tier3-style">3</dd>
          </dl>
          <dl id="save">
            <dt >Save</dt>
            <dd class="tier-details tier1-style">$0.50</dd>
           <dd class="tier-details tier2-style">$1.00</dd>
           <dd class="tier-details tier3-style">$1.50</dd>
          </dl>
         <dl id="units">
            <dt >Units</dt>
            <dd class="tier-details tier1-style">1000</dd>
            <dd class="tier-details tier2-style">3000</dd>
            <dd class="tier-details tier3-style">5000</dd>
          </dl>

        </div>

CSS代码

.Primary {
padding-right: 10px;
float:left;
position:relative; left:185px; 
margin-right: 20px;
width: 265px;
display: block;
height: 320px;
background: white;
border: 1px solid;

}

我一直在为此奋斗3天，并感谢任何帮助。

Answer 1

这是一个简单的错误，文字从div外面的段落溢出并向下推动框。一旦我纠正，他们都完美排队。

如何水平对齐rails循环生成的Div

1 个答案: