html - 如何使用 `content_for?`方法实现动态布局列？

Question

我正在使用 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 column block 中我想“有条件地”显示右列 content_for 右列出现。

Answer 1

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

对于你的奖励问题，你应该将内容列的内容放在一个内包装的 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