A）

Question

我有这些HAML（A）和Sass（B）文件（在背景中使用i。罗盘和ii。ceaser-easing-0.2）。

根据此示例，我想为左窗格设置动画（水平扩展/缩小），并使右窗格自动调整大小。

我用这些样式设置了我的父容器{display：box;盒子方向：水平; }。并且子div具有' box-flex '并且缓和' 过渡 '。但是右侧窗格没有调整大小。

我想知道还有什么我必须放在那里？

谢谢

A）


    %html{ :lang => "en" } 

      %head
        %meta{ :charset => "utf-8" }
        %link{ :rel => "stylesheet", :href => "css/1140.css", :type => "text/css", :media => "screen" }
        %link{ :rel => "stylesheet", :href => "css/styles.css", :type => "text/css", :media => "screen" }
        %link{ :rel => "stylesheet", :href => "css/thing.css", :type => "text/css", :media => "screen" }

        %link{ :rel => "stylesheet", :href => "css/screen.css", :type => "text/css", :media => "screen, projection" }
        %link{ :rel => "stylesheet", :href => "css/print.css", :type => "text/css", :media => "print" }
        // [if IE]
        //  
        // [endif]

        %script{ :type => "text/javascript", :src => "js/css3-mediaqueries.js" }
        %script{ :type => "text/javascript", :src => "js/jquery-1.6.3.js" }
        :javascript
          $(document).ready(function() {
            $(".left-col").click(function() {
              console.log("right-col clicked");
              $(".left-col").toggleClass("closed");
            });
          }); 

      %body 
        .container
          .header Header
          .main-content 
            .left-col.debug Left Panel
            .right-col.debug Right Panel
        .footer Footer

B）


    @import "compass/layout"
    @import "compass/layout/stretching"
    @import "compass/css3/box"
    @import "ceaser-easing"

    $header-height : 50px
    $footer-height : 150px
    $left-col-width : 250px
    @include sticky-footer( $footer-height , "#container", "#left-col", "#footer")

    html, body
      min-height: 400px 
      min-width: 800px
      height: 100%

    .header
      background: #999
      height: $header-height
      box-shadow: 0 4px 6px #543

    .footer 
      background: #fdd 
      clear: both
      z-index: 10
      height: $footer-height

    .container
      padding: 0px
      width: 100%
      min-height: 100% 
      margin: 0 auto -150px

    .main-content
      @include display-box
      @include box-orient(horizontal)

    .left-col
      width: $left-col-width
      @extend .stretched
      +stretch-y( $offset-top: $header-height, $offset-bottom: $footer-height )
      @include box-flex(1)
      @include ceaser-transition(easeInOutExpo, width, 500ms, 0s)

    .left-col.closed
      width: 500px

    .right-col
      @extend .stretched
      @include box-flex(1)
      +stretch( $offset-top : $header-height, $offset-left : $left-col-width, $offset-bottom : $footer-height )

    .debug
      border-style: solid
      border-width: 1px

Answer 1

您似乎不应该对position: absolute的孩子应用box-flex，因为这可以防止他们在改变大小时互相“推”。

解决方法是在position: absolute上应用.main-content而不是从那里定位：

.main-content
  @include display-box
  @include box-orient(horizontal)
  +stretch-y( $offset-top: $header-height, $offset-bottom: $footer-height )

.left-col
  width: $left-col-width
  @extend .stretched
  @include box-flex(1)
  @include ceaser-transition(easeInOutExpo, width, 500ms, 0s)

.left-col.closed
  width: 500px

.right-col
  @extend .stretched
  @include box-flex(1)

您可以在此处查看： http://jsfiddle.net/yMjH6/

放松/过渡后，窗格没有调整大小

A）

B）

1 个答案: