轨道样式循环答案

【问题标题】：rails styling a loop轨道样式循环
【发布时间】：2012-02-29 18:31:42
【问题描述】：

Rails 新手。尝试将带有 css 的背景添加到我的代码的循环区域，但它似乎没有在该区域中读取。在 rails loop 函数之前或之后应用的任何 css 都会显示，但背景会在museum.each 循环之前停止。有什么帮助吗？

脚手架.css.css：

#museums {
    background: #ccc;
}

索引：

<div id="museums">
<h1> Museums </h1>
<% @museums.each do |museum| %>
    <div class="museumAdd">
        <div class="name"><%= museum.name %></div>
        <div class="description"><%= museum.description %></div>
        <div class="location"><%= museum.city %>, 
        <%= museum.state %></div><br />

        <div class="edit">
            <%= link_to 'View', museum %><br />
            <%= link_to 'Edit', edit_museum_path(museum) %><br />
            <%= link_to 'Delete', museum, :confirm => 'Are you sure?', :method => :delete %>
        </div>
    </div>
<% end %>
</div>

【问题讨论】：

您是否尝试过使用 Firebug 来查看具有类 museumAdd、name、description、location 和 edit 的元素的背景值？
是的，在谷歌开发者中检查它，如果我添加高度：500px 和背景：#ccc，它会将循环传播到底部，但只是背景：#ccc 停止。
我不想添加高度，因为内容会发生变化。有人注意到这个问题吗？

标签： html ruby-on-rails css erb

【解决方案1】：

您没有提供足够的信息来肯定地回答这个问题，而且我还没有足够的业力/马戏团积分/任何问题来作为评论提出问题。

哦，好吧，不过我确实有一个很好的猜测。这不是 Rails 问题。你可以在那里使用任何东西。这是一个 CSS 问题。从您的问题下的 cmets 来看，这听起来确实像是一个经典的“容器未封闭其浮动”问题，即使我不能问您#museum 里面的东西是否浮动。他们是吗？添加设定高度符合经典症状。

市面上大约有无数种不同的浮动清除和封闭技术。假设你现在没有在你的 div 上设置高度，一个快速的检查方法是，如果你给#museums overflow: hidden，问题会消失吗？

Overflow:hidden 并不总是最好的浮动封闭方法，但它在 90+% 的情况下都很好。尝试并报告。

【讨论】：

你对浮动是完全正确的。我没有考虑清楚的解决方法。我更容易从 html/css 中弄清楚这一点，但我认为 rails 的结构方式并不是这样。谢谢

【解决方案2】：

听起来你有一些其他的 css 搞砸了这个。此外，看起来这里有一些分类问题，我假设您不希望所有带有“描述”或“名称”类的东西在应用程序中都具有相同的样式。如果是这种情况，请尝试：

#museums {
    background: #ccc;
}
.museumAdd .name, .museumAdd .description, .museumAdd .location, .museumAdd .edit{
background-color:transparent;
}

或者简单地说：

#museums div{background-color:transparent;}

【讨论】：