文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用`content_for?`方法实现动态布局列？

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

Stack Overflow用户

提问于 2012-09-17 21:03:59

回答 2查看 239关注 0票数 0

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

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

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

注意:希望我正在寻找布局的示例实现(还包括Rails方法、HTML和CSS代码)。

奖励：在content列块中，如果右列存在，我希望“有条件地”显示右列。

html

css

ruby-on-rails

ruby-on-rails-3

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-09-17 21:55:24

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

对于您的额外问题，您应该将内容列的内容放在一个内包装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;
}

<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

票数 0

Stack Overflow用户

发布于 2012-09-17 21:07:59

您可能需要检查content_for?，如果为给定的参数生成了内容，则返回true。请参阅content_for?

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12467088

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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