I'd like to create a grid of these 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
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
.
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
:
- http://www.brunildo.org/test/inline-block.html
- http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
精彩评论