0

我正在使用 Ruby on Rails 3。我想使用该content_for?方法呈现布局，以便“有条件地”生成具有适当 CSS 属性的 HTML 代码。也就是说，我想实现具有以下功能的布局：

  • 如果content_for存在左列，则布局有 2 列（具有固定宽度的左列和具有剩余宽度的内容列）；
  • 如果content_for左列不存在，则布局有 1 列（全宽的内容列）。

如何在/app/views/layouts/application.html.erb文件中实现它？你有什么建议吗？

注意：希望我正在寻找布局的示例实现（还包括 Ruby on Rails 方法、HTML 和 CSS 代码）。

奖励：在内容列块内，如果存在右列，我想“有条件地”显示右列content_for。

4

2 回答 2

0

您可能想要检查，如果给定参数产生了内容content_for?，它会返回。true看content_for?

于 2012-09-17T21:07:59.943 回答
0

您可以使用相邻 ( +) 或后续 ( ~) 同级选择器根据左列是否可见有条件地对内容列应用边距。

对于您的奖励问题，您应该将 content 列的内容放在一个内部包装 div 中，然后使用:nth-last-child检查右列是否可见并有条件地在那里应用边距：

CSS：

.page {
  position: relative;
}

.page .left-column {
  background: lavender;
  left: 0;
  position: absolute;
  top: 0;
  width: 180px;
}

.page .content-column { background: orange; }

.page .content-column > .inner-wrap { background: rgba(255,255,255,0.3); }

.page .left-column + .content-column {
  margin-left: 200px;
}

.page .content-column .right-column {
  background: lime; 
  position: absolute;
  right: 0;
  top: 0;
  width: 90px;
}

.page .content-column > .inner-wrap:nth-last-child(2) {
  margin-right: 100px;
}

HTML：

<div class="page">

  <% if content_for?(:left_column) %>
    <div class="left-column">
      <%= yield(:left_column) %>
    </div>
  <% end %>

  <div class="content-column">
    <div class="inner-wrap">
      <%= yield(:content_column) %>
    </div>

    <% if content_for?(:right_column) %>
      <div class="right-column">
        <%= yield(:right_column) %>
      </div> 
    <% end %>          
  </div>

</div>

渲染布局预览：http: //jsbin.com/icurey/8/edit

于 2012-09-17T21:55:24.617 回答