Почему столбцы нарушают мой макет?
Я использую 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%;
}
}
живая демонстрация: http://codepen.io/webmasterpf/pen/dopWLL