在轨道上的div不能正确对齐。

I'd like to create a grid of these divs:

我想创建一个网格这些divs:

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

but when I insert the following lines into them, they are no longer aligned horizontally:

但当我插入以下几行时，它们不再水平对齐:

 <% @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 %>

any idea why? thank you.

知道为什么吗?谢谢你！

btw:

顺便说一句:

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

======== edit: i am inserting the generated html

======== =编辑:我正在插入生成的html

1 个解决方案

#1

I don't know Ruby, so I'm not 100% sure I know what your generated HTML looks like, but I guess the issue is that you're not specifying vertical-align.

我不知道Ruby，所以我不能100%确定我知道您生成的HTML是什么样子的，但是我猜问题是您没有指定垂直对齐。

Try adding:

尝试添加:

.category_result {
    vertical-align: top
}

And/or:

和/或:

.category_company_name {
    vertical-align: top
}

See these links to understand why you need vertical-align with display: inline-block:

请查看这些链接，以了解为什么需要垂直对齐显示:inline-block:

http://www.brunildo.org/test/inline-block.html
http://www.brunildo.org/test/inline-block.html
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

#1