代码之家  ›  专栏  ›  技术社区  ›  srboisvert

CSS问题。我如何让蓝图css工作rails tabnav小部件?

  •  1
  • srboisvert  · 技术社区  · 17 年前

    tabnav widget 显示区域。我已经在布局的其他方面使用蓝图css,但我没有足够的css能力来弄清楚如何在tabnav的内容区域中显示蓝图容器。

    tabnav的内容区域是 <div class="main_tabnav_content" id="main_tabnav_content">

    .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 主异常内容

    来自蓝图: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;}
    
    2 回复  |  直到 17 年前
        1
  •  3
  •   Zac    17 年前

    我想如果你加上这个 <div class="clearfix"></div> 在maintabnavcontentdiv结束之前,它应该修复float问题。

        2
  •  1
  •   Chesham    17 年前

    你有span-5&冷边界类?听起来可能是浮动问题。基本上,当你将列添加到 main_tabnav_content div,div不会展开,对吧?

    推荐文章