CSS：使用divider元素的响应式布局变得不成比例？

我有一个响应式布局，但工作正常，但我的问题是，当我在我的页面中添加一个简单的divider元素时，一切都会遍布整个地方。CSS：使用divider元素的响应式布局变得不成比例？

这是一个工作FIDDLE

如果你伸展页的小提琴一样多，你可以，你会看到这个问题。

的问题是，从这个元素：<div class="divider"></div>

如果删除元素，一切工作再次罚款，但我需要一个分离元件和我想不通，为什么这种情况发生！

这是我的全部代码：

/* imports */ 
@import url(http://fonts.googleapis.com/css?family=Lobster); 
/* resets */ 
*, 
*:before, 
*:after { 
    box-sizing: border-box; 
} 
.clearfix:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 


/* global */ 

.wrapper { 
    margin: 0 auto; 
    padding: 20px; 
    max-width: 95%; 
    background-color: #fff; 
} 
h1 { 
    font-family: "Lobster", cursive; 
    font-size: 1.3em; 
    margin-bottom: 10px; 
    background-color:#000; 
    color:#FFF; 
    padding:10px; 

} 
h2 { 
    font-weight: 700; 
} 

/* grid */ 
[class*="row-"] { 
    margin-bottom: 20px; 
} 
[class*="row-"]:last-child { 
    margin-bottom: 0; 
} 
[class*="col-"] { 
} 

@media all and (min-width: 768px) { 

    /* all cols margin */ 
    [class*="col-"] { 
    margin-right: 20px; 
    } 
    [class*="col-"]:last-child { 
    margin-right: 0; 
    } 

    /* make the columns responsive */ 
    .col-1-2 { 
    float: left; 
    width: 50%; 
    } 
    .col-1-4 { 
    float: left; 
    width: 25%; 
    border-left: 1px dotted #e46a10; 
    padding:10px; 
    } 
    .col-1-8 { 
    float: left; 
    width: 25%; 
    } 

    /* 2 span rows */ 
    .row-2 { 
    padding-left: 20px; 
    } 
    .row-2 [class*="col-"]:first-child { 
    margin-left: -20px; 
    } 

    /* 4 span rows */ 
    .row-4 { 
    padding-left: 60px; 

    } 
    .row-4 [class*="col-"]:first-child { 
    margin-left: -60px; 
    } 

    /* 8 span rows */ 
    .row-8 { 
    padding-left: 60px; 
    } 
    .row-8 [class*="col-"]:nth-child(4n+1) { 
    margin-left: -60px; 
    } 
    .row-8 [class*="col-"]:nth-child(5n-1) { 
    margin-right: 0; 
    } 
    .row-8 [class*="col-"]:nth-child(6n-1) { 
    clear: both; 
    } 

} 


@media all and (min-width: 1200px) { 

    /* adjust width */ 
    .col-1-8 { 
    float: left; 
    width: 12.5%; 
    } 

    /* 8 span rows */ 
    .row-8 { 
    padding-left: 140px; 
    } 
    /* reset these... */ 
    .row-8 [class*="col-"]:nth-child(4n+1) { 
    margin-left: 0; 
    } 
    .row-8 [class*="col-"]:nth-child(5n-1) { 
    margin-right: 20px; 
    } 
    .row-8 [class*="col-"]:nth-child(6n-1) { 
    clear: none; 
    } 
    /* and add this */ 
    .row-8 [class*="col-"]:nth-child(1) { 
    margin-left: -140px; 
    } 

} 


.divider{ 
display:inline-block; 
    width: 100%; 
border-bottom: 1px dotted #ccc; 

}

可能有人请告知这个问题？

来源

2016-08-03 Jackson

只需将分频器，而不是在它之后'.row-4 clearfix'，它工作正常 – shwarp

@shwarp，我知道，但我需要的是关口后-4而不是.row这是容器... – Jackson

，你可以添加另一个容器吗？围绕你的cols，并把分隔符放在它之后？因为你的问题是由于浮动：左上角 – shwarp

如果无法放置.divider外.row-4容器，那么你可以只边框添加到.row-4 DIV本身并删除.divider一起。

CSS

.row-4 { 
    border-bottom: 1px dotted #ccc; 
    padding-bottom: 15px; 
}

结果

JSFiddle

来源

2016-08-03 16:27:08

分配器有一个目的。它假设每四分之一分。向容器添加边框不会给我所需的结果。 – Jackson

@Jackson，我会再看一遍，并尝试找到适合您要求的解决方案。 –

@杰克逊，我已经准备好了flexbox解决方案，但它确实改变了大量的代码，但它也使它更清洁，更高效。是您感兴趣的flexbox解决方案吗？ https://jsfiddle.net/onjL7kn4/8/ –

我想我找到了问题，那就是：

[class*="col-"]:last-child { 
    margin-right: 0; 
}

由于没有最后孩子css类，该代码发生在现实中的最后一个div在.row容器，所以在这种情况下，它需要.divider！

因此，如果可以，只需更改分隔符的标签，例如section！

或代替:last-child，使用:nth-child(n)

来源

2016-08-03 16:57:18 shwarp

好的赶上！这绝对是问题！ +1 https://jsfiddle.net/onjL7kn4/9/ –

CSS：使用divider元素的响应式布局变得不成比例？

回答

相关问题