我正在使用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);
}
}
}
我不知道流血或隔离,但也许这是解决这个问题的方法。如果我使用最后一个,我的专栏左边有很大的余地。 谢谢 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%;
}
}