CSS 问题。如何让蓝图 css 工作 rails tabnav 小部件？答案

【问题标题】：CSS question. How can I get blueprint css to work rails tabnav widget?CSS 问题。如何让蓝图 css 工作 rails tabnav 小部件？
【发布时间】：2009-03-24 12:05:42
【问题描述】：

我需要一个快速的解决方案，以便在 tabnav widget 显示区域内获得一些不错的布局。我已经在布局的其他方面使用了蓝图 CSS，但我没有足够的 CSS 代码来弄清楚如何让蓝图容器显示在 tabnav 的内容区域中。

tabnav的内容区是<div class="main_tabnav_content" id="main_tabnav_content"> 这是相关的css：

.main_tabnav {
    color: #000;
    border-bottom: 1px solid #ccc;
    margin: 13px 0px 0px 0px;
    padding: 0px;
    z-index: 1;
    padding-left: 10px }

.main_tabnav ul {
    margin: 0px;
    padding: 0px;
}

.main_tabnav li {
    display: inline;
    overflow: hidden;
    list-style-type: none; }

.main_tabnav li span.disabled {
        color: #888888;
        background: #FAFAFA;
        border: 2px solid #DDDDDD;
        border-bottom: none;
        padding: 2px 5px 0px 5px;
        margin: 0;
        text-decoration: none;}

.main_tabnav a, main_tabnav a.active {
    color: #000000;
    background: #EEEEEE;
    font-weight: bold;
    border: 1px solid #ccc;
    padding: 2px 5px 0px 5px;
    margin: 0;
    text-decoration: none; }

.main_tabnav a.active {
    background: #FFFFFF;
    border-bottom: 3px solid #FFFFFF; }

.main_tabnav a:hover {
    color: #FFFFFF;
    background: #CCCCCC; }

.main_tabnav a:visited {
    color: #000000; }

.main_tabnav a.active:hover {
    background: #FFFFFF;
    color: #000000; }

.main_tabnav_content {
    background: #FFFFFF;
    padding: 20px;
    border:1px solid #ccc;
    border-top: none;
    z-index: 2;
}

我希望能够像这样在 main_tabnav_content 区域内放置一些列

    <div class="span-5 colborder">
       stuff
    </div>
    <div class="span-5 colborder">
        stuff
    </div>
    <div class="span-5 colborder">
       stuff
    </div>

此时显示列，但main_tabnav_content 框不会在它们周围展开。关于如何将蓝图布局嵌套在main_tabnav_content 区域内的任何建议？

来自蓝图：screen.css：

.column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6,  div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 {float:left;margin-right:10px;}
.last, div.last {margin-right:0;}
.span-1 {width:30px;}
.span-2 {width:70px;}
.span-3 {width:110px;}
.span-4 {width:150px;}
.span-5 {width:190px;}

还有：

div.colborder {padding-right:24px;margin-right:25px;border-right:1px solid #eee;}

【问题讨论】：

标签： ruby-on-rails css blueprint-css

【解决方案1】：

我认为，如果您在 main_tabnav_content div 的末尾添加此 <div class="clearfix"></div>，它应该可以解决浮动问题。

【讨论】：

【解决方案2】：

你有 span-5 和 colborder 类的 css 吗？听起来这可能是一个浮动问题。基本上发生的情况是，当您将列添加到 main_tabnav_content div 时，div 不会扩展，对吧？

【讨论】：

正确。 div 没有展开。 span-5 和 colborder 类直接来自 Blueprint CSS 框架。