CSS:带有分隔符元素的响应式布局不成比例？

Question

我有一个响应式的布局，它工作得很好，但我的问题是，当我在我的页面中添加一个简单的分隔符元素时，所有的东西都会乱七八糟。

这是一个有效的FIDDLE

如果您在小提琴中尽可能地伸展页面，您就会看到问题。

这个问题来自这个元素：<div class="divider"></div>

如果删除该元素，一切都会恢复正常，但我需要该divider元素，但我不明白为什么会发生这种情况！

这是我的全部代码：

/* 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;

}

有人能在这个问题上给点建议吗？

Answer 1

我想我找到了问题所在，如下所示：

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

因为css类没有最后一个子类，所以这段代码实际上采用.row容器中的最后一个div，所以在本例中它采用.divider！

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

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

Answer 2

如果您无法将.divider放在.row-4容器之外，那么只需将边框添加到.row-4 div本身，然后一起删除.divider即可。

CSS

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

结果

​

​