【问题标题】:Getting two Slickgrid tables side by side并排获得两个 Slickgrid 表
【发布时间】:2012-06-26 17:57:05
【问题描述】:

如何将两个 slickgrid 表并排放置?现在,我只是使用 grid = new Slick.Grid... 创建了两个网格,但我必须在 CSS 中使用硬编码的尺寸,例如:

#dynamic1 { /*this is grid one*/
  position: absolute;
  top: 120px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height:500px;
}

#dynamic2 { /*grid two*/
  position: absolute;
  top: 120px;
  left: 750px;
  right: 0px;
  bottom: 0px;
  height:500px;
}

这不好玩。而且它不是动态的。如果可能的话,如果我可以将它们并排放置,并且组合宽度可以扩展以填充整个浏览器窗口,那也很好。

编辑:已修复!这是新代码:

#dynamic1 {
float: left;
width: 49%;
position: absolute;
  top: 120px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height:500px;
}

#dynamic2 { /*grid two*/
  float: right;
  width: 50%;
  position: absolute;

  top: 120px;

  right: 0px;
  bottom: 0px;
  height:500px;
}

【问题讨论】:

    标签: javascript css slickgrid


    【解决方案1】:
    position: absolute;
      **float: left;**
      top: 120px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      height:500px;
    }
    
    #dynamic2 { /*grid two*/
       **float: right;**
      position: absolute;
      top: 120px;
      left: 750px;
      right: 0px;
      bottom: 0px;
      height:500px;
    }
    

    你只需要添加一个左浮动和右浮动。您可以为它们分配等于 100% 的任何宽度组合。示例:

    position: absolute;
      **float: left;**
      **width: 45%;**
      top: 120px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      height:500px;
    }
    
    #dynamic2 { /*grid two*/
       **float: right;**
      **width: 55%;**
      position: absolute;
      top: 120px;
      left: 750px;
      right: 0px;
      bottom: 0px;
      height:500px;
    }
    

    【讨论】:

    • 哇,这几乎完全有效!不过,有一个简单的问题:您知道一种方法可以使 dynamic1 的滚动条出现在 dynamic1 的右侧吗?现在,两个滚动条都出现在 dynamic2 上,令人困惑。
    • 将它们都包装在一个 div 中是我的第一个猜测。很难确切地说出你在说什么。你有 jsfiddle 吗?
    • 啊,等等!我刚刚意识到它只适用于 left:750px;包括。浮动:对;实际上没有工作。 Lemme tinker... 编辑:太好了,现在可以了!
    猜你喜欢
    • 2022-11-20
    • 2020-10-07
    • 2015-11-12
    • 1970-01-01
    • 2020-04-25
    • 1970-01-01
    • 1970-01-01
    • 2015-12-04
    • 1970-01-01
    相关资源
    最近更新 更多