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%

我最终会在新行上找到每个.foo div。休息是由css还是haml造成的，还是我如何渲染局部的？我如何配置它，以便在新行上显示新的.foo个div之前，它们将在一行上呈现？

Answer 1

我最终将每个.foo div放在一个新行上。

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

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

如何配置它，以便在新行上显示新的.foo div之前，会在一行上渲染？

您希望通过以下内容使<div class="foo">元素浮动：

div.foo
  float: left

`render partial：'foo'，collection：@ foos`，每个`foo`之间没有换行符`％br`

1 个答案: