为什么列会破坏我的布局?

时间:2015-05-21 10:35:00

标签: css susy-compass

我正在使用susy2,我不明白为什么列会破坏我的布局:

body .conteneur{
    .col1_layout_2_7_3{
       @include span($mobilecol);

        @include clearfix;
        @include breakpoint ($tablet){
            @include span(1 of $tabletcol);
            background: #00CC99;
        }
        @include breakpoint ($desktop){
           @include span(2 of $desktopcol);
            background: darkorange;
        }
        //Pour orientation paysage
         @include breakpoint ($tabletlandscape){
           @include span(2 of $tabletcol-landcsape);
            background: violet;
        }
    }
    .col2_layout_2_7_3{
       @include span($mobilecol);

        @include clearfix;
        @include breakpoint ($tablet){
           @include span(5 of $tabletcol);

        }
        @include breakpoint ($desktop){
          @include span(7 of $desktopcol);

        }
        //Pour orientation paysage
         @include breakpoint ($tabletlandscape){
           @include span(5 of $tabletcol-landcsape);

        }

    }
    .col3_layout_2_7_3{
        @include span($mobilecol);
        @include clearfix;
        @include breakpoint ($tablet){
            @include span( 2 of $tabletcol);

        }
        @include breakpoint ($desktop){
           @include span(3 of $desktopcol);

        }
        //Pour orientation paysage
         @include breakpoint ($tabletlandscape){
           @include span(last 3 of $tabletcol-landcsape);

        }

    }
}

我不知道流血或隔离,但也许这是解决这个问题的方法。如果我使用最后一个,我的专栏左边有很大的余地。 enter image description here 谢谢 EDIt:css输出

body .conteneur .col1_layout_2_7_3 {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  overflow: hidden;
  *zoom: 1;
}
@media (min-width: 800px) and (max-width: 989px) {
  /* line 80, ../sass/layout/_layout-nodes.scss */
  body .conteneur .col1_layout_2_7_3 {
    width: 10.32338%;
    float: left;
    margin-right: 2.48756%;
    background: #00CC99;
  }
}
@media (min-width: 990px) {
  /* line 80, ../sass/layout/_layout-nodes.scss */
  body .conteneur .col1_layout_2_7_3 {
    width: 15.29605%;
    float: left;
    margin-right: 1.64474%;
    background: darkorange;
  }
}
@media (min-height: 767px) and (max-width: 1024px) and (orientation: landscape) {
  /* line 80, ../sass/layout/_layout-nodes.scss */
  body .conteneur .col1_layout_2_7_3 {
    width: 18.41584%;
    float: left;
    margin-right: 1.9802%;
    background: violet;
  }
}
/* line 98, ../sass/layout/_layout-nodes.scss */
body .conteneur .col2_layout_2_7_3 {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  overflow: hidden;
  *zoom: 1;
}
@media (min-width: 800px) and (max-width: 989px) {
  /* line 98, ../sass/layout/_layout-nodes.scss */
  body .conteneur .col2_layout_2_7_3 {
    width: 61.56716%;
    float: left;
    margin-right: 2.48756%;
  }
}
@media (min-width: 990px) {
  /* line 98, ../sass/layout/_layout-nodes.scss */
  body .conteneur .col2_layout_2_7_3 {
    width: 57.64803%;
    float: left;
    margin-right: 1.64474%;
  }
}
@media (min-height: 767px) and (max-width: 1024px) and (orientation: landscape) {
  /* line 98, ../sass/layout/_layout-nodes.scss */
  body .conteneur .col2_layout_2_7_3 {
    width: 49.0099%;
    float: left;
    margin-right: 1.9802%;
  }
}
/* line 117, ../sass/layout/_layout-nodes.scss */
body .conteneur .col3_layout_2_7_3 {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  overflow: hidden;
  *zoom: 1;
}
@media (min-width: 800px) and (max-width: 989px) {
  /* line 117, ../sass/layout/_layout-nodes.scss */
  body .conteneur .col3_layout_2_7_3 {
    width: 23.13433%;
    float: left;
    margin-right: 2.48756%;
  }
}
@media (min-width: 990px) {
  /* line 117, ../sass/layout/_layout-nodes.scss */
  body .conteneur .col3_layout_2_7_3 {
    width: 23.76645%;
    float: left;
    margin-left: 76.23355%;
    margin-right: -100%;
  }
}
@media (min-height: 767px) and (max-width: 1024px) and (orientation: landscape) {
  /* line 117, ../sass/layout/_layout-nodes.scss */
  body .conteneur .col3_layout_2_7_3 {
    width: 28.61386%;
    float: left;
    margin-left: 71.38614%;
    margin-right: -100%;
  }
}

现场演示:http://codepen.io/webmasterpf/pen/dopWLL

0 个答案:

没有答案