"渲染部分："foo"，集合：@foos"，每个"foo"之间没有换行符"%br"

Question

我app/views/bar/index.html.haml以下内容

%p= render partial: 'foo', collection: @foos

我的app/views/bar/_foo.html.haml部分以下内容：

.foo
  .title
    %h3= foo['name']
  .image¬
    = image_tag (foo['image'])['url']
  %p.description
    :erb
      <%= foo['description'] %>
  %span.price= number_to_currency foo['price'].to_i

以及我的app/assets/stylesheets/bar.css.sass样式表中的以下内容：

.foo
  border: 2px solid black
  border-radius: 5px
  background: #FAF7F7
  text-align: center
  width: 30%
  li
    text-align: left
  img
    max-height: 90%
    max-width: 90%

我最终将每个 .foodiv 放在新行上。 中断是由 css 还是 haml 或我渲染部分的方式引起的？ 我将如何配置它，以便在新div 显示在新行上之前，在一行上呈现尽可能多的 .foodiv？

Answer 1

我最终会在新行上得到每个 .foodiv。

div元素是块级元素。默认情况下，它们display设置为 block，这意味着它们不会并排或"内联"呈现。

如果希望它们以内联方式显示，则必须通过浮动它们或将其 display 属性设置为 inline 来手动强制它们执行此操作。

我将如何配置它，以便在新 .foodiv 显示在新行之前在一行上呈现尽可能多的 .foodiv？

您希望通过如下所示的方式使<div class="foo">元素浮动：

div.foo
  float: left