Question

我想创建这些div的网格：

.category_result {
    width:178px;
    margin-left:10px;
    margin-right:10px;
    height:180px;
    font-size:13px;
    display:inline-block;
}

但是当我在其中插入以下行时，它们不再是水平对齐的：

 <% @nonempty_category_companies[index].each do |cmp|%>
  <div class="category_company_name">
  <%= link_to company.company_name, :controller=>"companies", :action=>"show", :company_name =>"#{cmp.company_name}" %>
  </div>
<% end %>

任何想法为什么？谢谢。

顺便说一句：

.category_company_name {
    padding-top:7px;
    padding-left:2px;
    display:inline-block;
}

====== 编辑：我正在插入生成的HTML

Answer 1

我不知道Ruby，所以我不是100％确定我知道你生成的HTML是什么样的，但我想问题是你没有指定vertical-align。

尝试添加：

.category_result {
    vertical-align: top
}

和/或：

.category_company_name {
    vertical-align: top
}

请参阅以下链接，了解vertical-align display: inline-block与{{1}}：

的相关原因

导轨中的div不能正确对齐

1 个答案: